css-outline:0 none
2016-07-12 11:50
288 查看
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
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
相关文章推荐
- 有用的HTML+CSS片段
- **CSS**对CSS的认识
- CSS基础学习
- selenium定位元素之By.className()和By.cssSelector()
- CSS3嵌套立方体旋转
- css3图片注释 Annotation Overlay Effect with CSS3 (精)
- 纯CSS制作简单几何图形
- css属性支持
- 关于rem、px、em的区别
- 文字 AnimatedOpeningType css3的文字3D翻转特效
- CSS-DOM设计style属性的艺术
- HTML&CSS基础学习笔记1.10-添加链接
- CSS水平居中和垂直居中解决方案
- CSS水平居中和垂直居中解决方案
- 添物不花钱学javaEE--CSS
- 添物不花钱学javaEE--CSS
- SCSS Invalid US-ASCII character 处理
- CSS3选择器一
- CSS深入理解
- 用CSS美化你的HTML