溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何使用CSS去掉超鏈接的虛線邊框”，在日常操作中，相信很多人在如何使用CSS去掉超鏈接的虛線邊框問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用CSS去掉超鏈接的虛線邊框”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
在前端制作的過程中會發現，一些文字/圖片鏈接，或者一些input控件，在點擊時會在周圍出現虛線邊框，一般會在火狐和IE瀏覽器下出現虛線框，谷歌下不會有。
這些虛線邊框是作為對視覺設計的一種輔助，在不使用鼠標，而用鍵盤Tab鍵進行頁面瀏覽時，會標示出當前所在的鏈接或控件的位置，便于瀏覽。這對那些視覺有障礙的人士來說更是必不可少的。
但是有些時候我們卻不想使用它們，因為瀏覽器對虛線框的解析有差異，并且不規則，所以在視覺設計上反而成為了某種缺陷。所以這種時候，我們想要禁用這些虛線邊框，使瀏覽者的視覺享受能夠完美無瑕。
純CSS去掉超鏈接或按鈕點擊時出現的虛線邊框
CSS Code復制內容到剪貼板
<style type="text/css">
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
</style>
</head>
<body>
<a href="http://www.admin10000.com" target="_blank"><img src="https://cache.yisu.com/upload/information/20210311/295/12622.jpg" border="0"></a>
<a href="http://www.admin10000.com" target="_blank">admin10000.com</a>
<input type="button" value="admin10000.com"/>
<button>admin10000.com</button>
</body>
從以上代碼可以看出，可以通過設置CSS屬性outline解決。
FF存在bug，其中input，button標簽通過私有屬性::-moz-focus-inner特別處理
以上方法在IE6、IE7下無效。可使用 onfocus 屬性解決，如下：
CSS Code復制內容到剪貼板
<a href="http://www.admin10000.com" target="_blank" onfocus="this.blur()">admin10000.com</a>
使用jquery方法只需一句，非常簡單，支持所有瀏覽器
JavaScript Code復制內容到剪貼板
$("a,input,button").focus(function(){this.blur()});
到此，關于“如何使用CSS去掉超鏈接的虛線邊框”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
