css-outline:0 none

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}皆可：

MSIE和FF中的统一处理方法：

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