[分享]css中hr的样式代码

CSS中的

hr {
    height: 1px;
    background-color: #ccc;
    border: none;
    margin: 20px 0;
} 

这段代码将水平线的高度设置为1像素，背景色设置为灰色，去掉默认的边框样式，并在上下添加20像素的间距。

hr {
    height: 2px;
    background-color: #f00;
    border: none;
    margin: 10px 0;
} 

这段代码将水平线的高度设置为2像素，背景色设置为红色，去掉默认的边框样式，并在上下添加10像素的间距。

hr {
    height: 1px;
    background-image: linear-gradient(to right, #f00, #00f);
    border: none;
    margin: 30px 0;
} 

这段代码将水平线的高度设置为1像素，背景为红蓝渐变色，去掉默认的边框样式，并在上下添加30像素的间距。

hr {
    height: 5px;
    background-color: #000;
    border-radius: 5px;
    width: 50%;
    margin: 50px auto;
} 

这段代码将水平线的高度设置为5像素，背景色设置为黑色，设置圆角为5像素，宽度为父元素的50%，并在垂直居中，在水平方向居中，并在上下添加50像素的间距。

以上是一些常用的