在 IE 以及 Firefox 浏览器下，默认情况下，点击链接文字或图片（特指a标签下的）时，链接的周围会出现一个虚线框，当鼠标移开，或点击页面其它地方后，此虚线框就消失。此虚线框对一部分用户来说，尤其是键盘使用爱好者或不得不用键盘的使用者，用处是显而易见的，因为可以直接利用键盘上的 Tab 键在不同的链接之间切换，当切换到某个链接上时，此链接周围就会出现虚线框。没有了此虚线框，对于这些用户来说，网页内容就像一篇纯文本文档，失去了网页的超链接的无穷乐趣。但是，对于一些应用场合，此虚线框的出现就会严重影响美观程度，试想当点击一张图片准备切换另一张图片时，在图片中间出现一个虚线框，者给图片的欣赏带来很大的影响。此时，就应该在相关的链接上做适当设置，使此虚线框消失，或变的不明显。END
消除虚线框消除虚线框其实很简单，只需要对链接的 outline 属进行相关设置即可。哪到底是对链接标签选择器 a 进行设置，还是对伪类选择器 :hover、:active、:focus 进行设置呢？当然，最好不要直接对标签选择器 a 进行设置，因为这也太绝对化了，直接把所有链接的虚线框都给屏蔽掉了，也就直接把键盘用户给排除掉了，所以最好还是对伪类选择器进行设置。由上文可知 :focus 伪类只要是用于处理聚焦区域的显示，尤其是针对键盘事件的响应，因为键盘切换的原理就是让链接内容获取焦点(focus)的，那么是否应该对此伪类选择器进行设置？即：a:focus {outline: none;}
消除聚焦区域的虚线框对于普通用户来说可以很好的解决，但是对于键盘用户仍然无法定位到正确的连接上，从而无法访问链接。经网上查询，有人做了总结性文章：《CSS-鼠标点击去除外边虚线键盘焦点加上》，称最好将 :active 的 outline 属性进行设置：a:active {outline: none;} 这样效果或许会好点，虽然在一定的场合虚线框还会出现。
是虚线框表现的不明显a:focus { background-color:#f00; } /*或者*/a:hover, a:focus {text-decoration:underline;}设置焦点被触发时，链接背景为红色等。当然可以根据需要设计出更加复杂的样式，更可以把focus和hover设置成同样的样式END