css outline 样式

时间:2023-04-18 17:12:55

outline 样式是 CSS 的一个盒模型属性,用于定义元素外围的一个轮廓线(outline),可以在视觉上突出元素,但并不会占用空间,也不会影响元素的布局。

以下是 outline 样式的语法:

selector {
outline: [outline-color] [outline-style] [outline-width];
}

其中,selector 为 CSS 选择器,outline-color 表示轮廓线的颜色,可以使用 CSS 颜色值或关键字,比如 red、#000、transparent 等等;outline-style 表示轮廓线的样式,可以为实线、虚线、双线等多种样式,比如 solid、dotted、double 等等;outline-width 表示轮廓线的宽度,可以为像素、em 等长度单位,也可以为关键字 thin、medium、thick 等等。

以下是一些 outline 样式的实例:

/* 将链接元素的轮廓线设置为红色、双线、5px 宽度 */
a {
outline: red double 5px;
}

/* 将段落元素的轮廓线设置为黄色、点线、2px 宽度 */
p {
outline: yellow dotted 2px;
}

/* 将所有元素的轮廓线去除 */
* {
outline: none;
}

这些样式将分别设置不同元素的 outline 属性。在第一个实例中,将所有链接元素的轮廓线设置为红色、双线、5px 宽度。在第二个实例中,将所有段落元素的轮廓线设置为黄色、点线、2px 宽度。在最后一个实例中,将所有元素的轮廓线去除,这将使所有元素不再具有轮廓线。

相关词 outline