1
:focus
{
}
{
2
outline: 0;
3
}
:focus 规则中 outline 为何要设置为0呢?
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
Blank 怿飞的文章 《 text-indent 隐藏文字时出现的 outline 问题》 中说了原由。
CSS 界权威 Eric meyer 大师说了:
为什么在:focus 规则中把轮廓的宽度压掉呢?是因为必须自己定义一个 outline 属性,对其可访问性有用。
本人把outline的属性值挖出来,看看相应的值对应的是什么属性:
outline: none;
none这是个关键字,是outline-style(轮廓样式)的属性值。none就是无轮廓样式。
outline: 0;
0 是 0px 的简写。通常在这种情况下 px 可省写。是outline-width(轮廓宽度)的属性值。0就是轮廓宽度为0像素。
轮廓(outline)与边框(border)类似,二者的区别有两点:
1.轮廓不能参与到文档流中,所以不会影响文档流。
2.轮廓可能不一定为矩形,但也不是说为圆形,可能是“合并”的形状。
好了,继续研究meyer大师的reset (重置)代码...
参见:CSS2.1规范 18.4 用户界面之 outline属性
注:IE 7及以下版本不支持该属性,可以在脚本中用hideFocus = 'true'定义。