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"