outline是css3的一個屬性,用的很少。
聲明,這是個不能兼容的css屬性,在ie6、ie7、遨游瀏覽器都不兼容。
outline控制的到底是什么呢?
當聚焦a標簽的時候,在a標簽的區(qū)域周圍會有一個虛線的框,這個框不同于border的是,它是不占有任何寬度的。當你取消焦點的時候,這個虛線框就會自然消失。你可以通過遨游、火狐或者ie的幾個版本看到。而safari、opera、goole瀏覽器等本身就不支持這個效果,所以看不到。下面是outline的樣子示例,也是我正在做的一個頁面上截取出來的。
這個就是a標簽被聚焦后出現(xiàn)了虛線框,也就是outline;
基本上這個是沒有用的效果,大多數(shù)情況下我們會希望不要出現(xiàn)這種效果,于是給a標簽設(shè)置outline:none;很遺憾的是,ie6、7和遨游瀏覽器里都不能實現(xiàn),只有ff,ie8在加了outline:none后會取消聚焦的虛線框。所以我說這個Outline屬性基本就是一個費屬性。
怎么樣才能取消這個虛線框呢?常用方法有三種:
1:在a標簽里加入js控制,當a標簽被聚焦時,強制取消焦點,這時候a標簽自然不會有虛線框。
<a href="#" onfocus="this.blur();">測試</a>
這里設(shè)置聚焦時觸發(fā)blur();強制取消焦點。自然是屢試不爽。
2:在a標簽里嵌套其他標簽,比如span 或者var等等,把內(nèi)容放在被嵌套的標簽里。這時候點擊這個鏈接,聚焦的是a的子標簽,自然不會聚焦在a標簽上,所以也能避免這個問題。
3:不適用a標簽做鏈接,采用其他標簽,使用js做出hover的效果,在css里加入cursour:pointer;設(shè)置鼠標以上時變小手。給用戶是鏈接的錯覺。使用js做點擊時的頁面跳轉(zhuǎn)等。最大的缺點是對se友好性比前兩種差很多。
這三種方法的共同點是比較麻煩,相比較而言,推薦第一種,第二第三也視不同的情況而定。也是會用到的。
我認為outline的這個效果時瀏覽器遲早要取消掉的,所以關(guān)于這個屬性的知識也相當?shù)碾u肋。
最近打算寫點標簽?zāi)J屬性的有效利用方面的東西,不過越想寫越覺得寫的東西會很多,每每都是寫點就刪掉了。想從整個知識體系中抽離出一部分來單獨講,是很難的事,就像是一張網(wǎng),你只講其中一根線的話,很難讓人理解知道你在講的網(wǎng),而這個網(wǎng)又太大了。
有空閑的時候,我會好好規(guī)劃下該怎么寫這些。
如對本文有疑問,請?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會為你解答!! 點擊進入論壇