css去掉a標籤點選後的虛線框

2022-08-27 08:30:09 字數 1703 閱讀 5922

outline是css3的乙個屬性,用的很少。

宣告,這是個不能相容的css屬性,在ie6、ie7、遨遊瀏覽器都不相容。

outline控制的到底是什麼呢?

當聚焦a標籤的時候,在a標籤的區域周圍會有乙個虛線的框,這個框不同於border的是,它是不占有任何寬度的。當你取消焦點的時候,這個虛線框 就會自然消失。你可以通過遨遊、火狐或者ie的幾個版本看到。而safari、opera、goole瀏覽器等本身就不支援這個效果,所以看不到。

這個就是a標籤被聚焦後出現了虛線框,也就是outline;

基本上這個是沒有用的效果,大多數情況下我們會希望不要出現這種效果,於是給a標籤設定outline:none;很遺憾的是,ie6、7和遨遊瀏 覽器裡都不能實現,只有ff,ie8在加了outline:none後會取消聚焦的虛線框。所以我說這個outline屬性基本就是乙個費屬性。

怎麼樣才能取消這個虛線框呢?常用方法有三種:

1:在a標籤裡加入js控制,當a標籤被聚焦時,強制取消焦點,這時候a標籤自然不會有虛線框。

測試

這裡設定聚焦時觸發blur();強制取消焦點。自然是屢試不爽。

3:不適用a標籤做鏈結,採用其他標籤,使用js做出hover的效果,在css裡加入cursour:pointer;設定滑鼠以上時變小手。給使用者是鏈結的錯覺。使用js做點選時的頁面跳轉等。最大的缺點是對se友好性比前兩種差很多。

這三種方法的共同點是比較麻煩,相比較而言,推薦第一種,第二第三也視不同的情況而定。也是會用到的。

我認為outline的這個效果時瀏覽器遲早要取消掉的,所以關於這個屬性的知識也相當的雞肋。

或者還可以在css中加入body a

outline是css3的乙個屬性,用的很少。

宣告,這是個不能相容的css屬性,在ie6、ie7、遨遊瀏覽器都不相容。

outline控制的到底是什麼呢?

當聚焦a標籤的時候,在a標籤的區域周圍會有乙個虛線的框,這個框不同於border的是,它是不占有任何寬度的。當你取消焦點的時候,這個虛線框 就會自然消失。你可以通過遨遊、火狐或者ie的幾個版本看到。而safari、opera、goole瀏覽器等本身就不支援這個效果,所以看不到。

這個就是a標籤被聚焦後出現了虛線框,也就是outline;

基本上這個是沒有用的效果,大多數情況下我們會希望不要出現這種效果,於是給a標籤設定outline:none;很遺憾的是,ie6、7和遨遊瀏 覽器裡都不能實現,只有ff,ie8在加了outline:none後會取消聚焦的虛線框。所以我說這個outline屬性基本就是乙個費屬性。

怎麼樣才能取消這個虛線框呢?常用方法有三種:

1:在a標籤裡加入js控制,當a標籤被聚焦時,強制取消焦點,這時候a標籤自然不會有虛線框。

測試

這裡設定聚焦時觸發blur();強制取消焦點。自然是屢試不爽。

3:不適用a標籤做鏈結,採用其他標籤,使用js做出hover的效果,在css裡加入cursour:pointer;設定滑鼠以上時變小手。給使用者是鏈結的錯覺。使用js做點選時的頁面跳轉等。最大的缺點是對se友好性比前兩種差很多。

這三種方法的共同點是比較麻煩,相比較而言,推薦第一種,第二第三也視不同的情況而定。也是會用到的。

我認為outline的這個效果時瀏覽器遲早要取消掉的,所以關於這個屬性的知識也相當的雞肋。

或者還可以在css中加入body a

去掉點選鏈結時周圍的虛線框outline屬性

1.css方式 在ie下是使用html屬性 hidefoucs,在html標籤中加上hidefocus true 屬性即可,但這個屬性是ie私有的,firefox是不認的。加了hidefocus屬性 ie中用css處理的方式為 a onfocus 注意大小寫 firefox的處理方法比較符合標準,只...

去掉點選鏈結時周圍的虛線框outline屬性

1.css方式 在ie下是使用html屬性 hidefoucs,在html標籤中加上hidefocus true 屬性即可,但這個屬性是ie私有的,firefox是不認的。加了hidefocus屬性 ie中用css處理的方式為 a onfocus 注意大小寫 firefox的處理方法比較符合標準,只...

如何去掉鏈結的虛線框

在 firefox 裡可以用 moz outline none 或者 outline none 來將其去掉。所以我們可以這樣寫 a focus 順便提一下,如果你用過 safari 和 chrome 可能會發現,當輸入框得到焦點時邊框會出現陰影效果。如果想去掉陰影效果也可以用 outline 屬性。...