outline

尝试一下

outline: solid;

outline: dashed red;

outline: 1rem solid;

outline: thick double #32a1ce;

outline: 8px ridge rgba(170, 50, 220, 0.6);
border-radius: 2rem;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  padding: 0.75rem;
  width: 80%;
  height: 100px;
}

与其他简写属性一样，忽略的子属性会被设为 初始值。

border 和 outline

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

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

语法

/* 样式 */
outline: solid;

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

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

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

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

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

取值

<'outline-color'>

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

<'outline-style'>

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

<'outline-width'>

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

形式定义

形式语法

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

<outline-width> = 
  <line-width>  

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

<outline-color> = 
  auto                  |
  <'border-top-color'>  

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

<outline-line-style> = 
  none    |
  auto    |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

<border-top-color> = 
  <color>     |
  <image-1D>  

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

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

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

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

示例

使用 outline 设置焦点样式

HTML

<a href="#">该链接具有特殊的焦点样式。</a>

CSS

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

结果

无障碍考虑

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

• How to Design Useful and Usable Focus Indicators
• WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible

规范

浏览器兼容性