在默认情况下，点击 a 标签，input，或者添加click事件的时候，浏览器留下一个轮廓外框（chrome之下为蓝色）~ 然而这些默认的轮廓外框，有时候很影响美观，并不是我们想保留的。 我们应如何消除这些讨厌的 轮廓外框呢？

使用outline:none去除轮廓外框

如：

a{ outline:none; }

PC端轮廓外框消失了，然而发现在手机上依然存在~~

这时候添加如下代码便可

a{
     outline:none; 
     -webkit-tap-highlight-color:rgba(0,0,0,0);
}

默认样式加overflow:hidden处理

添加overflow:hidden可以有效解决链接轮廓框被延长的问题。不过，值得一提的是，在Opera浏览器下，第二张图片链接，即使用绝对定位偏移的那个链接的链接轮廓框依旧被拉长了，这可以说是一个bug。

添加如下代码便可

去除链接轮廓框再通过:focus引入

 不推荐的IE6-7浏览器去除虚框方法

IE浏览器下有个hidefocus="true"的属性，可以去除点击时的IE6和IE7浏览器下虚框，但是也抹杀了键盘用户的focus焦点虚框，个人而言，此方法不推荐。我倒是建议置之一边，不闻不问。

此方法在所有浏览器下都表现良好，点击无链接外框，且不影响focus的外框表现。就是有些啰嗦冗余。还有就是替换了chrome及Safari浏览器的默认focus样式，同样的Opera浏览器下的双边框。

　　a{

　　　　outline:none;

　　}

　　a:focus{

　　　　outline:thin dotted;

　　}

　　a:active{

　　　　outline:none;

　　}

使用:hover和:active去掉链接外框轮廓线

仅仅使用:active还有一点小小的问题，

 　　a:active{

　　　　outline:none;

　　}

就是用户点击一个链接和这个链接指向的页面加载的过程中，链接外框依旧会出现，这其实也不难理解，链接被点中，也处于:focus状态。由于本测试页面的链接基本上都是在页面自身，所以看不到此问题。一定程度上解决此问题的方法就是添加:hover的outline:none属性。

另外，还有一种情况下，链接外框的问题没有解决，就是当用户点击了一个链接后，再点击浏览器的后退按钮的时候，此时outline就会出现。

　　a:hover,a:active{

　　　　outline:none;

　　}