CSS 轮廓（outline）

CSS 轮廓（Outline）

CSS 轮廓是指一个元素周围的可见边框线，它通常用于突出显示某个元素或是为其创建一种视觉效果。本文将详细介绍 CSS 轮廓的相关属性和实例。

CSS 轮廓属性

在 CSS 中，轮廓可以使用以下属性进行设置：

outline-color

设置轮廓线的颜色。可以设置颜色名、十六进制值、RGB 值或者是颜色函数。

/* 为h1元素添加一个红色的轮廓线 */
h1 {
  outline-color: red;
}

outline-style

设置轮廓线的样式。可以设置为：dotted、dashed、solid、double、groove、ridge、inset、outset 或 none。

/* 为h1元素添加一个双线轮廓 */
h1 {
  outline-style: double;
}

outline-width

设置轮廓线的宽度。可以设置为：thin、medium、thick 或者像素值。

/* 为h1元素添加一个10像素宽的轮廓线 */
h1 {
  outline-width: 10px;
}

outline

outline 属性可以同时设置轮廓的颜色、样式和宽度。

/* 为h1元素添加一个3像素宽的红色双线轮廓 */
h1 {
  outline: 3px double red;
}

CSS 轮廓实例

<!DOCTYPE html>
<html>
<head>
	<title>CSS Outline 实例</title>
	<style>
		h1 {
			outline-color: red;
			outline-width: 3px;
			outline-style: solid;
		}

		h2 {
			outline: 3px dotted green;
		}

		p {
			outline: 10px groove blue;
		}
	</style>
</head>
<body>
	<h1>Hello World</h1>
	<h2>This is CSS Outline Example</h2>
	<p>The quick brown fox jumps over the lazy dog.</p>
</body>
</html>

在上面的示例中，我们为 h1、h2 和 p 元素分别设置了不同样式的轮廓线。其中 h1 使用了红色实线的轮廓线，h2 使用了绿色的点状轮廓线，p 使用了蓝色的槽状轮廓线。

CSS 轮廓与 CSS 边框的区别

虽然 CSS 轮廓与 CSS 边框都可以用于创建元素的可见边界，但二者有所不同。

首先，CSS 边框是在元素内部的，而轮廓则是在元素周围的。其次，轮廓不占用任何布局空间，即使添加了轮廓，元素的大小和位置也不会改变。

另外，边框可以分别设置四个方向的样式、颜色和宽度，而轮廓却只能设置一个整体的样式、颜色和宽度。

结论

CSS 轮廓为元素提供了一种简单的方法来为其增加一个可见的可视化表示，以突出重点或增强它的外观。尽管它与 CSS 边框类似，但是轮廓可以更好地扩展边框的功能，提供了更灵活、更强大的外观控制功能，同时又不影响元素的布局和大小。在设计网页时，我们可以利用轮廓的特性，增加一些有趣的效果，从而提高用户体验。

CSS 语法 CSS 边框