outline-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
尝试一下
outline-width: 12px; outline-width: thin; outline-width: medium; outline-width: thick; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> 这是一个带有轮廓线框的盒子。 </div> </section> #example-element { outline: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } 在定义轮廓的外观时，通常使用简写属性 outline 更为方便。
语法
css
/* 关键字值 */ outline-width: thin; outline-width: medium; outline-width: thick; /* <length> 值 */ outline-width: 1px; outline-width: 0.1em; /* 全局值 */ outline-width: inherit; outline-width: initial; outline-width: revert; outline-width: revert-layer; outline-width: unset; outline-width 属性的值可以是以下列表的任意一项。
值
形式定义
形式语法
outline-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
示例
设置元素的轮廓宽度
HTML
html
<span id="thin">细</span> <span id="medium">中等</span> <span id="thick">粗</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="em">1.2em</span> CSS
css
span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2px; } #oneex { outline-width: 1ex; } #em { outline-width: 1.2em; } 结果
规范
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # outline-width |