如何使用CSS去掉超鏈接的虛線邊框

這篇文章主要介紹“如何使用CSS去掉超鏈接的虛線邊框”，在日常操作中，相信很多人在如何使用CSS去掉超鏈接的虛線邊框問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用CSS去掉超鏈接的虛線邊框”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

為文縣等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及文縣網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站建設、做網(wǎng)站、文縣網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

在前端制作的過程中會發(fā)現(xiàn)，一些文字/圖片鏈接，或者一些input控件，在點擊時會在周圍出現(xiàn)虛線邊框，一般會在火狐和IE瀏覽器下出現(xiàn)虛線框，谷歌下不會有。

這些虛線邊框是作為對視覺設計的一種輔助，在不使用鼠標，而用鍵盤Tab鍵進行頁面瀏覽時，會標示出當前所在的鏈接或控件的位置，便于瀏覽。這對那些視覺有障礙的人士來說更是必不可少的。

但是有些時候我們卻不想使用它們，因為瀏覽器對虛線框的解析有差異，并且不規(guī)則，所以在視覺設計上反而成為了某種缺陷。所以這種時候，我們想要禁用這些虛線邊框，使瀏覽者的視覺享受能夠完美無瑕。

純CSS去掉超鏈接或按鈕點擊時出現(xiàn)的虛線邊框

CSS Code復制內(nèi)容到剪貼板

<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="/upload/otherpic76/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復制內(nèi)容到剪貼板

<a href="http://www.admin10000.com" target="_blank" onfocus="this.blur()">admin10000.com</a>

使用jquery方法只需一句，非常簡單，支持所有瀏覽器

JavaScript Code復制內(nèi)容到剪貼板

$("a,input,button").focus(function(){this.blur()});

到此，關于“如何使用CSS去掉超鏈接的虛線邊框”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

當前名稱：如何使用CSS去掉超鏈接的虛線邊框
網(wǎng)頁URL：http://chinadenli.net/article2/ppcdic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站制作、網(wǎng)頁設計公司、自適應網(wǎng)站、移動網(wǎng)站建設、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何使用CSS去掉超鏈接的虛線邊框