關於CSS中的outline-style

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的是，它是不佔有任何寬度的。當你取消焦點的時候，這個虛線框就會自然消失。你可以通過遨遊、Firefox或者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做點擊時的頁面跳轉等。最大的缺點是對方便使用性比前兩種差很多。