outline使用方法,outline與border的區別

在瀏覽器裏，當鼠標點擊或使用Tab鍵讓一個連接或者一個radio得到焦點的時候，該元素將會被一個輪廓虛線框圍繞。這個輪廓虛線框就是 outline 。

outline 能告訴用戶那一個能夠激發事件的html元素獲取了焦點，對鍾愛鍵盤操做的用戶尤爲有意義。一個清晰悅目的outline設計能提升使用表單的用戶體驗。 另外一方面，outline 也有些討厭的地方，好比使用CSS設計的Tab(標籤頁)時，選擇一個Tab以後，Tab上的輪廓虛線會一直顯示，有些影響美觀。

CSS 的 outline 屬性容許咱們改變這個默認的輪廓虛線框效果。其配套的相關屬性包括：

• outline

• outline-width

• outline-style

• outline-color

• outline-offset

其中第一個 outline 是速寫(shorthand)形式，格式爲： outline: outline-color || outline-style || outline-width

若是想讓連接獲取到焦點時更醒目，能夠設置輪廓線條爲紅色，outline 屬性的設計可能以下：

a { outline-color: red; }

而若是想去掉影響美觀的Tab上的輪廓線條，outline屬性可以下設置：

.active-tab { outline: none; ...... /* other properties */}

outline in browsers

直到最新的IE7 beta2，MS的IE還不支持 outline CSS屬性，不過IE爲HTML元素擴展了一個 hideFoucs 屬性，全部能得到焦點的元素若是添加 hideFoucs="true" 屬性，那麼它們得到焦點時虛線框將被不出現。好比MSDN裏的例子:

<button>button with rectangle</button>

<!-- 其實hideFocus="false"同hideFocus="true"同樣的效果，IE只要發現存在hideFocus屬性即生效，這樣寫是爲了兼 容XHTML的屬性必須有值的規範 -->

<button hideFocus="true">tton without rectangle</button>

Firefox1.5提供了全面的outline支持。早期的Firefox 1.0.x 版本聽說可使用Mozilla的獨有擴展 -moz-outline，不過我想如今幾乎找不到什麼不升級到Firefox 1.5的理由了。 另外Opera9 beta彷佛還不支持。

更多瀏覽器支持信息能夠從QuirksMode 找到。

outline 與 border 的區別

border 可應用於幾乎全部有形的html元素，而 outline 是針對連接、表單控件和ImageMap等元素設計。從而另外一個區別也能夠推理出，那就是： outline 的效果將隨元素的 focus 而自動出現，相應的由 blur 而自動消失。這些都是瀏覽器的默認行爲，無需JavaScript配合CSS來控制。

另外從 CSS的十八般技巧 一文中還讀到的一個區別就是： outline 不會象border那樣影響元素的尺寸或者位置。

去除焦點虛線：

style="outline:medium none;" hidefocus="true"