outline
试一试
outline: solid;
outline: dashed red;
outline: 1rem solid;
outline: thick double #32a1ce;
outline: 8px ridge rgb(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;
}
构成属性
此属性是以下 CSS 属性的简写：
语法
css
/* style */
outline: solid;
/* style | color */
outline: dashed #ff6666;
/* width | style */
outline: thick inset;
/* width | style | color*/
outline: 3px solid green;
/* Global values */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;
outline 属性可以使用下面列出的一个、两个或三个值来指定。值的顺序无关紧要。与所有简写属性一样，任何省略的子值都将设置为其初始值。
注意：如果未定义轮廓的样式，则许多元素的轮廓将不可见。这是因为样式默认为 none。一个明显的例外是 input 元素，它们由浏览器赋予默认样式。
值
<'outline-width'>-
设置轮廓的粗细。如果省略，默认为
medium。请参阅outline-width。 <'outline-style'>-
设置轮廓的样式。如果省略，默认为
none。请参阅outline-style。 <'outline-color'>-
设置轮廓的颜色。对于支持它的浏览器，默认为
invert，对于其他浏览器，默认为currentColor。请参阅outline-color。
描述
轮廓是元素边框外部的一条线。与其他盒子区域不同，轮廓不占用空间，因此它们不会以任何方式影响文档的布局。
有一些属性会影响轮廓的外观。可以使用 outline 属性更改样式、颜色和宽度，使用 outline-offset 属性更改与边框的距离，以及使用 border-radius 属性更改角角度。
轮廓不一定是矩形的：在处理多行文本时，一些浏览器会分别为每一行绘制轮廓，而另一些浏览器则会用单个轮廓包裹整个文本。
无障碍
将 outline 的值设置为 0 或 none 将删除浏览器的默认焦点样式。如果元素可以交互，则它必须具有可见的焦点指示器。如果删除了默认焦点样式，请提供明显的焦点样式。
- 如何设计有用且可用的焦点指示器
- WCAG 2.1: 理解成功准则 2.4.7: 可见的焦点
正式定义
| 初始值 | 作为简写中的每个属性
|
|---|---|
| 应用于 | 所有元素 |
| 继承性 | 否 |
| 计算值 | 作为简写中的每个属性
|
| 动画类型 | 作为简写中的每个属性
|
正式语法
outline =
<'outline-width'> ||
<'outline-style'> ||
<'outline-color'>
<outline-width> =
<line-width>
<outline-style> =
auto |
<outline-line-style>
<outline-color> =
auto |
<color> |
<image-1D>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
示例
使用 outline 设置焦点样式
HTML
html
<a href="#">This link has a special focus style.</a>
CSS
css
a {
border: 1px solid;
border-radius: 3px;
display: inline-block;
margin: 10px;
padding: 5px;
}
a:focus {
outline: 4px dotted #ee7733;
outline-offset: 4px;
background: #ffffaa;
}
结果
规范
| 规范 |
|---|
| CSS Basic User Interface Module Level 4 # outline |
浏览器兼容性
加载中…