outline

CSS 的 outline 属性是在一条声明中设置多个轮廓属性的简写属性，例如 outline-style , outline-width 和 outline-color 。

示例

/* 样式 */
outline: solid;

/* 颜色 | 样式 */
outline: #f66 dashed;

/* 样式 | 宽度 */
outline: inset thick;

/* 颜色 | 样式 | 宽度 */
outline: green solid 3px;

/* 全局值 */
outline: inherit;
outline: initial;
outline: unset;

border 和 outline

border 和 outline 很类似，但有如下区别：

• 轮廓不占据空间，绘制于元素内容周围。
• 根据规范，轮廓通常是矩形，但也可以是非矩形的。

浏览器支持

IE8以上版本的浏览器都支持 outline

语法：

outline : <outline-color> | <outline-style> | <outline-width>

取值：

• <outline-color> ：设置轮廓的颜色。没有设置时默认值为 currentcolor 。参见 outline-color 。
• <outline-style> ：设置轮廓的样式。没有设置时默认值为 none 。参见 outline-style 。
• <outline-width> ：设置轮廓的宽度。没有设置时默认值为 medium 。参见 outline-width 。

可访问性考虑

将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式。如果一个元素可交互，这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式。

实例

/* two identical declarations */

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }