首頁  >  文章  >  web前端  >  關於CSS中的outline-style

關於CSS中的outline-style

巴扎黑
巴扎黑原創
2017-06-28 13:53:471966瀏覽

  outline (輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。 outline 屬性設定元素周圍的輪廓線。

  要永遠在 outline-color 屬性之前宣告 outline-style 屬性。元素只有獲得輪廓以後才能改變其輪廓的顏色。

  可能的值描述:

#  none 預設。定義無輪廓。
  dotted 定義點狀的輪廓。
  dashed 定義虛線輪廓。
  solid 定義實線輪廓。
  double 定義雙線輪廓。雙線的寬度等同於 outline-width 的值。
  groove 定義 3D 凹槽輪廓。此效果取決於 outline-color 值。
  ridge 定義 3D 凸槽輪廓。此效果取決於 outline-color 值。
  inset 定義 3D 凹邊輪廓。此效果取決於 outline-color 值。
  outset 定義 3D 凸邊輪廓。此效果取決於 outline-color 值。
  inherit 規定應該從父元素繼承輪廓樣式的設定。

 

  outline控制的到底是什麼呢?

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

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

 

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

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


<a href="#" onfocus="this.blur();">测试</a>

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

  2:在a標籤裡嵌套其他標籤,例如span 或var等等,把內容放在被嵌套的標籤裡。這時候點擊這個鏈接,聚焦的是a的子標籤,自然不會聚焦在a標籤上,所以也能避免這個問題。

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

以上是關於CSS中的outline-style的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn