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 很类似，但有如下区别：

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

浏览器支持

语法：

取值：

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

可访问性考虑

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

实例

/* two identical declarations */

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

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com