[分享]css 水平线 颜色

在CSS中，可以通过设置border属性来创建水平线。其中，borderbottom属性用于指定下边框，从而创建水平线。/ 创建一条黑色的水平线 / hr { border: none; border...

在CSS中，可以通过设置border属性来创建水平线。其中，border-bottom属性用于指定下边框，从而创建水平线。

/* 创建一条黑色的水平线 */
hr {
border: none;
border-bottom: 1px solid black;
}

除了使用border属性创建水平线，还可以使用伪元素::before或::after来创建。其中，伪元素需要设置content属性来避免元素不可见。

/* 创建一条红色的水平线 */
hr {
position: relative;
border: none;
height: 1px;
}
hr::before {
content: "";
position: absolute;
top: -0.5px;
left: 0;
width: 100%;
height: 1px;
background-color: red;
}

在设置水平线的颜色时，可以使用CSS中的颜色值，如red、green、blue等，也可以使用RGB或十六进制颜色码。例如：

/* 创建一条蓝色的水平线 */
hr {
border: none;
border-bottom: 1px solid #0099ff;
}

当然，为了使网页更具有统一性，最好使用CSS变量来定义颜色值，以便于在整个网站中进行管理。

/* 创建一条黄色的水平线 */
:root {
--color-line: #ffff00;
}
hr {
border: none;
border-bottom: 1px solid var(--color-line);
}