CSS 设置hr样式

1.基本颜色

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

2. 改变高度

 hr {
        border: 0;
        height: 2px;
        background: linear-gradient(to right, #ff0000, #00ff00, #0000ff); /* 渐变色 */
        margin: 20px 0;
    }

 hr {
        border: 0;
        height: 3px; /* 高度为3px */
        background-color: #333;
        margin: 20px 0;
    }

3.改变渐变颜色

 hr {
        border: 0;
        height: 2px;
        background: linear-gradient(to right, #ff0000, #00ff00, #0000ff); /* 渐变色 */
        margin: 20px 0;
    }

4. 使用图片作为背景

   hr {
        border: 0;
        height: 10px;
        background: url('https://geek-docs.com/images/geek-docs-logo.png') repeat-x; /* 使用图片作为背景 */
        margin: 20px 0;
    }

5.虚线样式 

    hr {
        border: 0;
        height: 1px;
        background: #333;
        border-top: 1px dashed #999; /* 虚线样式 */
        margin: 20px 0;
    }

6.圆角样式 

 

    hr {
        border: 0;
        height: 1px;
        background: #333;
        border-top: 1px solid #999;
        border-radius: 5px; /* 圆角效果 */
        margin: 20px 0;
    }

7.双线样式 

<hr class="double">

    hr {
        border: 0;
        height: 1px;
        background: #333;
        margin: 20px 0;
    }
    hr.double {
        margin: 20px 0;
        border-top: 3px double #999; /* 双线样式 */
    }

8.左右样式 

    hr {
        border: 0;
        height: 1px;
        background: linear-gradient(to right, #333 50%, transparent 50%); /* 斜线样式 */
        margin: 20px 0;
    }

9.点线样式 

    hr {
        border: 0;
        height: 1px;
        background: #333;
        border-top: 1px dotted #999; /* 点线样式 */
        margin: 20px 0;
    }