轮廓是在元素边框之外绘制的一条线。
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
outline: #4CAF50 solid 10px;
margin: auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>
</body>
</html>
轮廓是在元素周围、边框之外绘制的一条线,以使元素“突出”。
CSS 具有以下轮廓属性:
outline-style
outline-color
outline-width
outline-offset
outline
注意:轮廓与边框不同!与边框不同,轮廓是 绘制在元素边框之外,并且可能与其他内容重叠。另外,大纲是 不是元素尺寸的一部分;元素的总宽度和高度 不受轮廓宽度的影响。
outline-style
属性指定轮廓的样式, 并且可以具有以下值之一:
- 定义虚线轮廓
- 定义虚线轮廓
- 定义一个坚实的轮廓
- 定义双轮廓
- 定义 3D 凹槽轮廓
- 定义 3D 脊状轮廓
- 定义 3D 插图轮廓
- 定义 3D 起始轮廓
- 没有定义轮廓
- 定义隐藏轮廓
以下示例显示了不同的 outline-style
值:
不同轮廓样式的演示:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
结果 :
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>
</html>
注意:其他大纲属性(您将在下一章中了解更多)都不会产生任何效果,除非 class="w3-codespan">outline-style
属性已设置!