试一试
outline-color: red;
outline-color: #32a1ce;
outline-color: rgb(170 50 220 / 0.6);
outline-color: hsl(60 90% 50% / 0.8);
outline-color: currentColor;
<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 {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
语法
css
/* <color> values */
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;
/* Global values */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;
outline-color 属性指定为以下值中的任意一个。
值
<color>-
轮廓的颜色，指定为
<color>。
规范还列出了一个附加值 auto，但目前没有任何浏览器支持。当实现时，除非 outline-style 设置为 auto，否则 auto 将计算为 currentColor，在这种情况下，它将计算为 强调色。
描述
轮廓是围绕元素绘制的一条线，位于 border 之外。与元素的边框不同，轮廓绘制在元素的框架之外，并且可能与其他内容重叠。另一方面，边框实际上会改变页面的布局，以确保它适合而不会与任何其他内容重叠（除非你明确将其设置为重叠）。
在定义轮廓外观时，通常使用简写属性 outline 更方便。
无障碍
自定义 焦点样式 通常涉及调整 outline 属性。如果轮廓的颜色被调整，重要的是确保它与轮廓所放置的背景之间的对比度足够高，以便有低视力障碍的人能够感知它。
颜色对比度是通过比较文本和背景颜色值的亮度来确定的。为了满足当前的 Web 内容可访问性指南 (WCAG)，文本内容需要 4.5:1 的比率，而大文本（如标题）需要 3:1 的比率。大文本定义为 18.66 像素及粗体或更大，或 24 像素或更大。
正式定义
正式语法
outline-color =
auto |
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
示例
设置实心蓝色轮廓
HTML
html
<p>My outline is blue, as you can see.</p>
CSS
css
p {
outline: 2px solid; /* Set the outline width and style */
outline-color: blue; /* Set the outline color */
margin: 5px;
}
结果
规范
| 规范 |
|---|
| CSS Basic User Interface Module Level 4 # outline-color |
浏览器兼容性
加载中…