CSS 轮廓属性


目录

    显示目录


轮廓是在元素边框之外绘制的一条线。


This element has a black border and a green outline with a width of 10px.

自己尝试一下 →

<!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 大纲

轮廓是在元素周围、边框之外绘制的一条线,以使元素“突出”。

CSS 具有以下轮廓属性:

outline-style
outline-color
outline-width
outline-offset
outline

注意:轮廓与边框不同!与边框不同,轮廓是 绘制在元素边框之外,并且可能与其他内容重叠。另外,大纲是 不是元素尺寸的一部分;元素的总宽度和高度 不受轮廓宽度的影响。



CSS 轮廓样式

outline-style 属性指定轮廓的样式, 并且可以具有以下值之一:

dotted

- 定义虚线轮廓

dashed

- 定义虚线轮廓

solid

- 定义一个坚实的轮廓

double

- 定义双轮廓

groove

- 定义 3D 凹槽轮廓

ridge

- 定义 3D 脊状轮廓

inset

- 定义 3D 插图轮廓

outset

- 定义 3D 起始轮廓

none

- 没有定义轮廓

hidden

- 定义隐藏轮廓

以下示例显示了不同的 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 属性已设置!