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手機也是支持的，只是顯示效果有所不同。