Skip to main content

外轮廓 outline

Docs

元素外轮廓​

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

  • outline 表示元素的外轮廓

    • 不占用空间
    • 默认显示在 border 的外面

  • outline 相关属性有

    • outline-width: 外轮廓的宽度。没有设置时默认值为 medium。参见 outline-width。
    • outline-style：设置轮廓的样式。没有设置时默认值为 none。参见 outline-style。取值跟 border 的样式一样，比如 solid、dotted。
    • outline-color: 外轮廓的颜色。没有设置时默认值为 currentcolor。参见 outline-color。
    • outline：outline-width, outline-style, outline-color 的简写属性，跟 border 用法类似

  • 应用实例

    • 去除 a 元素、input 元素的 focus 轮廓效果

  • border 和 outline 区别：

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

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

outline 属性可使用以下一个、两个或三个值来声明，且顺序不重要。

备注

对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 none。但 input 元素是例外，其样式默认值由浏览器决定。

/* 样式 */
outline: solid;

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

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

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

/* 全局值 */
outline: inherit;
outline: initial;
outline: unset;
无障碍考虑

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

取值​

  • <'outline-color'>: 设置轮廓的颜色。没有设置时默认值为 currentcolor。参见 outline-color。

  • <'outline-style'>: 设置轮廓的样式。没有设置时默认值为 none。参见 outline-style。

  • <'outline-width'>: 设置轮廓的宽度。没有设置时默认值为 medium。参见 outline-width。

语法​

outline =
  <'outline-color'>  ||
  <'outline-style'>  ||
  <'outline-width'>

outline-color =
  [ <color> | <1d-image> ]  |
  invert

  <1d-image> =
    <stripes()>

  <stripes()> =
    stripes( <color-stripe># )

  <color-stripe> =
    <color>                            &&
    [ <length-percentage> | <flex> ]?

  <length-percentage> =
    <length>      |
    <percentage>

outline-style =
  auto                  |
  <outline-line-style>

outline-width =
  <line-width>

    <line-width> =
      <length [0,∞]>  |
      thin            |
      medium          |
      thick

规范​

CSS Basic User Interface Module Level 4 (w3c.github.io)

w3c_outline

示例​

Loading Github Gist ...
Details