outline是css3的一個屬性,用的不多。css
聲明,這是個不能兼容的css屬性,在ie六、ie七、遨遊瀏覽器都不兼容。html
outline控制的究竟是什麼呢?css3
當聚焦a標籤的時候,在a標籤的區域周圍會有一個虛線的框,這個框不一樣於border的是,它是不佔有任何寬度的。當你取消焦點的時候,這個虛線框就會天然消失。你能夠經過遨遊、火狐或者ie的幾個版本看到。而safari、opera、goole瀏覽器等自己就不支持這個效果,因此看不到。express
這個就是a標籤被聚焦後出現了虛線框,也就是outline;瀏覽器
基本上這個是沒有用的效果,大多數狀況下咱們會但願不要出現這種效果,因而給a標籤設置outline:none;很遺憾的是,ie六、7和遨遊瀏覽器裏都不能實現,只有ff,ie8在加了outline:none後會取消聚焦的虛線框。因此我說這個Outline屬性基本就是一個費屬性。學習
怎麼樣才能取消這個虛線框呢?經常使用方法有三種:測試
1:在a標籤里加入js控制,當a標籤被聚焦時,強制取消焦點,這時候a標籤天然不會有虛線框。this
<a href="#" onfocus="this.blur();">測試</a>
這裏設置聚焦時觸發blur();強制取消焦點。天然是屢試不爽。spa
2:在a標籤裏嵌套其餘標籤,好比span 或者var等等,把內容放在被嵌套的標籤裏。這時候點擊這個連接,聚焦的是a的子標籤,天然不會聚焦在a標籤上,因此也能避免這個問題。htm
3:不適用a標籤作連接,採用其餘標籤,使用js作出hover的效果,在css里加入cursour:pointer;設置鼠標以上時變小手。給用戶是連接的錯覺。使用js作點擊時的頁面跳轉等。最大的缺點是對se友好性比前兩種差不少。
這三種方法的共同點是比較麻煩,相比較而言,推薦第一種,第二第三也視不一樣的狀況而定。也是會用到的。
我認爲outline的這個效果時瀏覽器早晚要取消掉的,因此關於這個屬性的知識也至關的雞肋。
或者還能夠在css中加入body a{outline:none;blr:expression(this.onFocus=this.blur());}
本文轉自博客:RattanyiXu (僅用於學習記錄)
原文地址:http://www.cnblogs.com/something/archive/2013/05/21/3090428.html