CSS 轮廓（outline）属性学习笔记

CSS 的 outline 属性可以用来设置元素的轮廓线，常用于给网页元素添加一些特殊效果。

语法

cssCopy Code
outline: outline-color outline-style outline-width;

其中：

• outline-color：表示轮廓线的颜色，可以是 CSS 颜色名、十六进制颜色码等。
• outline-style：表示轮廓线的样式，常用的值有 dotted、dashed、solid、double 等。
• outline-width：表示轮廓线的宽度，可以是像素值、em 单位等。

其中，outline-style 和 outline-width 可以省略，默认值为 none 和 medium。

实例

下面是一些实例，展示了如何使用 outline 属性：

红色实线轮廓线

cssCopy Code
outline: red solid 2px;

这个例子中，轮廓线的颜色是红色，样式是实线，宽度是 2 像素。

绿色虚线轮廓线

cssCopy Code
outline: #00ff00 dashed 3px;

这个例子中，轮廓线的颜色是绿色，样式是虚线，宽度是 3 像素。

蓝色双线轮廓线

cssCopy Code
outline: blue double;

这个例子中，轮廓线的颜色是蓝色，样式是双线，宽度使用默认值 medium。

不显示轮廓线

cssCopy Code
outline: none;

这个例子中，采用了 none 值，表示不显示轮廓线。

总结

outline 属性是一个很有用的 CSS 属性，通过它，可以为网页元素添加各种不同的样式轮廓线。同时，我们也要注意，轮廓线不同于边框线，不会影响到网页布局。