View in EnglishAlways switch to English

outline

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2023年3月⁩.

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

尝试一下

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>  <div>    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 通常是矩形，但也可以是非矩形的。

语法

css

/* 样式 */outline: solid;/* 样式 | 颜色 */outline: dashed #f66;/* 宽度 | 样式 */outline: thick inset;/* 宽度 | 样式 | 颜色 */outline: 3px solid green;/* 全局值 */outline: inherit;outline: initial;outline: revert;outline: revert-layer;outline: unset;

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

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

取值

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

形式定义

初始值	该简写所对应的每个属性： `outline-width`:`medium` `outline-style`:`none` `outline-color`:`auto`
适用元素	所有元素
是否是继承属性	否
计算值	该简写所对应的每个属性： `outline-width`: 绝对长度；如果指定关键词为`none`，则计算值为`0` `outline-style`: as specified `outline-color`: For the keyword`auto`, the computed value is`currentcolor`. For the color value, if the value is translucent, the computed value will be the`rgba()` corresponding one. If it isn't, it will be the`rgb()` corresponding one. The`transparent` keyword maps to`rgba(0,0,0,0)`.
动画类型	该简写所对应的每个属性： `outline-width`: alength `outline-style`: 按计算值的类型 `outline-color`: acolor

形式语法

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,∞]>|
thin|
medium|
thick

<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

html

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

CSS

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;}