CSS outline-width 属性值说明
| 值 | 描述 |
|---|---|
| medium | 定义介质轮廓。这是此属性的默认值。 |
| thin | 定义一个薄的轮廓。 |
| thick | 定义厚厚的轮廓。 |
| length | 定义轮廓的厚度。 |
| initial | 将属性设置为默认值。 |
| inherit | 从其父元素继承属性。 |
语法
outline-width: medium | thin | thick | length | initial | inherit;
具有多个值的轮廓宽度属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.p1 {
outline-style: solid;
outline-width: 5px;
}
.p2 {
outline-style: solid;
outline-width: 0.4em;
}
.p3 {
outline-style: solid;
outline-width: thin;
}
.p4 {
outline-style: solid;
outline-width: medium;
}
.p5 {
outline-style: solid;
outline-width: thick;
}
.p6 {
outline-style: solid;
outline-width: 0.1cm;
}
.p7 {
outline-style: solid;
outline-width: 1mm;
}
</style>
</head>
<body>
<h2>Outline-width 属性示例</h2>
<p class=“p1”>这是一个轮廓设置为5px的段落</p>
<p class=“p2”>这是一个轮廓设置为0.5em的段落</p>
<p class=“p3”>这是一个轮廓设置为精简的段落</p>
<p class=“p4”>这是一个轮廓设置为“中”的段落</p>
<p class=“p5”>这是一个轮廓设置为粗的段落</p>
<p class=“p6”>这是一个轮廓设置为0.1厘米的段落</p>
<p class=“p7”>这是一个轮廓设置为1毫米的段落</p>
</body>
</html>
在下面的例子中，第一个元素没有边框，第二个元素有。
请注意，第二个元素的轮廓在其边框之外。
带有边框的元素的轮廓宽度属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 2px solid #1c87c9;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline 属性示例</h2>
<div class="ex1">生活终归还得继续。 </div>
<br>
<div class="ex2">生活终归还得继续。 </div>
</body>
</html>
轮廓宽度属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<h2>Outline 属性示例</h2>
<div>生活终归还得继续。 </div>
</body>
</html>
与轮廓样式一起使用的轮廓宽度属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dashed;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline 属性示例</h2>
<div>生活终归还得继续。 </div>
</body>
</html>
轮廓宽度属性定义轮廓的宽度。
轮廓是围绕元素绘制的线。
但它与边界属性不同。
元素的宽度和高度属性不包括轮廓宽度，因为轮廓不被视为元素尺寸的一部分。
此属性具有以下值：中、厚、薄。
在设置轮廓宽度之前，我们应该设置轮廓样式属性。
| 初始值 | 中等的 |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。轮廓的宽度是有动画的。 |
| 版本 | CSS2. |
| DOM 语法 | object.Style.OutlineWidth =“thick”; |
日期：2020-06-02 22:14:42 来源：oir作者：oir