outline轮廓线在不同CSS样式下的表现
outline轮廓线在不同CSS样式下的表现
CSS 去除浏览器默认 轮廓外框
在默认情况下，点击 a 标签，input，或者添加click事件的时候，浏览器留下一个轮廓外框（chrome之下为蓝色）~ 然而这些默认的轮廓外框，有时候很影响美观，并不是我们想保留的。 我们应如何消除这些讨厌的 轮廓外框呢？
使用outline:none去除轮廓外框
如：
a{ outline:none; }
PC端轮廓外框消失了，然而发现在手机上依然存在~~
这时候添加如下代码便可
a{
outline:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
-webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。
语法：
-webkit-tap-highlight-color：color
默认值： inherit
适用于：链接元素比如新窗口打开，img元素比如保存图像等等
取值：
- color：颜色值
- transparent：透明值
* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
兼容性：
- iOS 1.1.1及更高版本的Safari浏览器可用
- 大部分android手机也是支持的，只是显示效果有所不同。
默认
普通的文字链接这是默认状态下，CSS文字缩进属性text-indent为-1000像素的表现。这是默认状态下，a标签内部span标签绝对定位左偏移-1000像素的表现。这里使用了文字偏移技术。一是使用text-indent负值；而是添加内部标签，然后左偏移绝对定位，定位至浏览器可视区域的外部。然而此技术会带来的问题是：焦点区域跟着延伸了，于是会有长长的链接轮廓框。在Firefox浏览器下，点击上面两个文字按钮可见此问题。
去除链接轮廓框
普通的文字链接这是outline:none状态下，CSS文字缩进属性text-indent为-1000像素的表现。这是a标签outline:none状态下，a标签内部span标签绝对定位左偏移-1000像素的表现。添加outline:none可以有效的去除链接轮廓框，这适用于所有的用户（习惯鼠标的以及习惯键盘的）。此样式经常可以在CSS重置(css reset)中看到。
去除链接轮廓框再通过:focus引入
普通的文字链接这是a:focus{outline:thin dotted;}状态下，CSS文字缩进属性text-indent为-1000像素的表现。这是a:focus{outline:thin dotted;}状态下，a标签内部span标签绝对定位左偏移-1000像素的表现。通过:focus重新引入outline会使IE和Firefox浏览器下:active的样式重新出现。于是，在单击文字或图片链接的时候，会看到链接轮廓框。在chrome浏览器以及Safari浏览器下，:focus{{outline:thin dotted;}可以准确的替换其默认focus时的样式。但是Opera浏览器不是覆盖原来的focus样式，而是添加，于是会出现双边框。
去除链接轮廓框，通过:focus引入，再由:active消除
普通的文字链接这是a:focus{outline:thin dotted;}a:active{outline:none;}状态下，CSS文字缩进属性text-indent为-1000像素的表现。这是a:focus{outline:thin dotted;}a:active{outline:none;}状态下，a标签内部span标签绝对定位左偏移-1000像素的表现。此方法在所有浏览器下都表现良好，点击无链接外框，且不影响focus的外框表现。就是有些啰嗦冗余。还有就是替换了chrome及Safari浏览器的默认focus样式，同样的Opera浏览器下的双边框。
仅仅使用:active去掉链接外框轮廓线
普通的文字链接这是a:active{outline:none;}状态下，CSS文字缩进属性text-indent为-1000像素的表现。这是a:active{outline:none;}状态下，a标签内部span标签绝对定位左偏移-1000像素的表现。这是个简洁高效的方法，可以去除用户点击图片式链接时的外框线的问题，同时保留了习惯使用键盘用户在链接获得焦点时虚框可见。并且不会重置浏览器默认的focus获得焦点的样式，或是产生双边框的问题。可以说是相当完美。
使用:hover和:active去掉链接外框轮廓线
普通的文字链接这是a:hover,a:active{outline:none;}状态下，CSS文字缩进属性text-indent为-1000像素的表现。这是a:hover,a:active{outline:none;}状态下，a标签内部span标签绝对定位左偏移-1000像素的表现。一些测试表明，仅仅使用:active还有一点小小的问题，就是用户点击一个链接和这个链接指向的页面加载的过程中，链接外框依旧会出现，这其实也不难理解，链接被点中，也处于:focus状态。由于本测试页面的链接基本上都是在页面自身，所以看不到此问题。一定程度上解决此问题的方法就是添加:hover的outline:none属性。
另外，还有一种情况下，链接外框的问题没有解决，就是当用户点击了一个链接后，再点击浏览器的后退按钮的时候，此时outline就会出现。
不推荐的IE6-7浏览器去除虚框方法
普通的文字链接这是hidefocus="true"状态下，CSS文字缩进属性text-indent为-1000像素的表现。这是hidefocus="true"状态下，a标签内部span标签绝对定位左偏移-1000像素的表现。IE浏览器下有个hidefocus="true"的属性，可以去除点击时的IE6和IE7浏览器下虚框，但是也抹杀了键盘用户的focus焦点虚框，个人而言，此方法不推荐。我倒是建议置之一边，不闻不问。
