在瀏覽器裡，當滑鼠點選或使用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那樣影響元素的尺寸或者位置。

總結：這兩者的區別有:
1.outline是不佔空間的，既不會增加額外的width或者height（這樣不會導致瀏覽器渲染時出現reflow或是repaint）
2.outline有可能是非矩形的（火狐瀏覽器下）

去除焦點虛線：

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

原文連結：https://my.oschina.net/guomingliang/blog/337169