css-outline:0 none

本文介绍了如何使用CSS去除链接聚焦时的虚线框,探讨了多种实现方法,包括CSS和JavaScript方式,并深入讲解了CSS3中的box-shadow属性及其应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

css原理小记

2016.7.12

-------------------------------------------------------

outline:0 none

当元素获得焦点的时候,焦点框为0.

比如说当前这个网页,你用tab键切换的时候,文字链接、搜索框、按钮等的外面会有一个虚线框(或高亮框),此时当前的元素就获得了焦点,你可以对它进行操作。

这个功能一般是为使用键盘操作的用户准备的。

 有些链接——比如一个图片链接,你不想让他出现虚线框破坏设计感,就可以用此方法。

一般不要去掉,只在一些影响设计美感的地方用。毕竟这个焦点框对键盘用户是很有帮助的。

-------------------------------------------------------

 功能:去掉链接周围的虚线框!

1. CSS方式

IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=true” 属性即可,但这个属性是IE私有的,

Firefox是不认的。

加了hidefocus属性

 IE中用CSS处理的方式为:

a{noOutline:expression_r(this.onFocus=this.blur());}

Firefox的处理方法比较符合标准,只需要在样式里设置a:focus{outline:none}皆可:

MSIEFF中的统一处理方法:

a{

outline:none;

noOutline:expression_r(this.onFocus=this.blur());

}

 

考虑性能优化:

a{outline:none;}

a:active{noOutline:expression_r(this.onFocus=this.blur());}

:focus{outline:0;}

----------------------------------------------------------------------------------------------------------------

2. js方式

$("a").bind("focus", function(){

if(this.blur){

this.blur();

}

});

 

 

-------------------------------------------------------

CSS3属性之二:box-shadow

举例:box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06) inset;

/*参数说明

    i.  1个长度值用来设置对象的阴影水平偏移值。可以为负值

 

    ii. 2个长度值用来设置对象的阴影垂直偏移值。可以为负值

 

    iii.如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

 

    iv. 如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值

 

    v.  设置对象的阴影的颜色

*/

 

语法:

box-shadow<length> <length> <length> <length> ||<color>

 取值:

<length> <length> <length>? <length>? || <color>

阴影水平偏移值(可取正负值);

阴影垂直偏移值(可取正负值);

阴影模糊值;

阴影颜色

 /* 设置阴影 */

    -webkit-box-shadow:1px 1px 3px #292929;

    -moz-box-shadow:1px 1px 3px #292929;

    box-shadow:1px 1px 3px #292929;

 

-------------------------------------------------------

background:none repeat scroll 0 0 #E4E4E4?

none:表示没有设置背景图片,

repeat:表示图片重复;

scroll :背景图片随浏览器下拉而滚动,

0%水平位置在x0

0%垂直位置在y0

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值