Skip to main content

元素轮廓样式 outline-style

Docs

元素轮廓样式​

outline-style CSS 属性被用于设置一个元素轮廓的样式。

元素轮廓是绘制于元素周围的一条线，位于border的外围，使元素突出

大多时候使用 outline 而不是 outline-style, outline-width 和 outline-color 会更方便。

/* 关键字 值 */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

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

取值​

<br-style> 可为以下这些值：

  • none: 无轮廓 (outline-width 为 0).

  • dotted: 轮廓为一系列点。

  • dashed: 轮廓为一系列短线。

  • solid: 轮廓为实线。

  • double: 轮廓为两根有空隙的线。outline-width 为线与空间的总和。

  • groove: 轮廓呈凹下状。

  • ridge: 与 groove 相反：轮廓呈凸起状。

  • inset: 轮廓呈嵌入状。

  • outset: 与 inset 相反：轮廓呈突出状。

语法​

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

规范​

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

w3c_outline-style

示例​

Loading Github Gist ...