常用的＜hr/＞分割线样式

花开富贵城

于 2022-10-08 11:06:37 发布

阅读量1.1k

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_42498352/article/details/127204937

版权

原文链接：666，看hr标签实现分隔线如何玩出花 « 张鑫旭-鑫空间-鑫生活

抄作业了一些常用分割线

<!DOCTYPE html> 
<html>           
    <head>
        <title>hr标签</title>
    </head>
    <body>
        <p class="type">实线</p>
        <hr class="hr-solid">

        <p class="type">点线</p>
        <hr class="hr-dotted">
        <hr class="hr-dotted2">

        <p class="type">虚线</p>
        <hr class="hr-dashed">
        <hr class="hr-dashed2">

        <p class="type">疏密可控的虚线</p>
        <hr class="hr-dashed-fixed">

        <p class="type">双实线</p>
        <hr class="hr-double">

        <p class="type">两头虚的分隔线</p>
        <hr class="hr-edge-weak">

        <p class="type">斜纹分隔线</p>
        <hr class="hr-twill">

        <p class="type">波浪线</p>
        <hr class="hr-wavy">

        <p class="type">阴影线</p>
        <hr class="hr-shadow">

        <p class="type">END</p>

    </body>
</html>
<style>
.type{
    text-align: center;
    margin-top: 40px;
}

.hr-solid {
    border: 0;
    border-top: 1px solid #d0d0d5;
}

.hr-dotted {
    border: 0;
    border-top: 1px dotted #a2a9b6;
}
.hr-dotted2 {
    border: 0;
    border-top: 2px dotted #a2a9b6;
}

.hr-dashed {
    border: 0;
    border-top: 1px dashed #a2a9b6;
}
.hr-dashed2 {
    border: 0;
    border-top: 2px dashed #a2a9b6;
}

.hr-dashed-fixed {
    border: 0;
    padding-top: 1px;
    background: repeating-linear-gradient(to right, #a2a9b6 0px, #a2a9b6 4px, transparent 0px, transparent 12px);
}

.hr-double {
    border: 0;
    border-top: 3px double #d0d0d5;
}

.hr-edge-weak {
    border: 0;
    padding-top: 1px;
    background: linear-gradient(to right, transparent, #d0d0d5, transparent);
}

.hr-twill {
    border: 0;
    padding: 3px;
    background: repeating-linear-gradient(135deg, #a2a9b6 0px, #a2a9b6 1px, transparent 1px, transparent 6px);
}

.hr-wavy {
    border: 0;
    color: #d0d0d5;
    height: .5em;
    white-space: nowrap;
    letter-spacing: 100vw;
    padding-top: .5em;
}
.hr-wavy::before {
    content: "\2000\2000";
    /* IE浏览器实线代替 */
    text-decoration: overline;
    /* 现代浏览器 */
    text-decoration: overline wavy;
}

.hr-shadow {
    border: 0;
    padding-top: 10px;
    color: #d0d0d5;
    border-top: 1px solid rgba(0,0,0,.1);
    box-shadow: inset 0 10px 10px -10px;
}
</style>