css3 hr水平线兼容

CSS3中的hr水平线在各大浏览器中支持良好，但兼容性问题还是需要重视。下面将介绍一些常用的CSS代码，帮助大家解决hr水平线的兼容性问题。

/* 方式一：使用border代替hr标签 */hr{
        display:none;
    /*去掉默认hr的横线*/}
.border{
        height:1px;
        border:none;
        border-top:1px solid #000;
        margin:10px 0;
}
/* 方式二：使用before伪元素代替hr标签 */hr{
        display:none;
    /*去掉默认hr的横线*/}
.hr:before{
        content:';
        display:block;
        height:1px;
        margin:10px 0;
        background-color:#000;
}
/* 方式三：使用hr标签，并加上兼容性代码 */hr{
        border:none;
        height:1px;
        background-color:#000;
        -webkit-box-shadow:0px 1px 0px 0px #000;
        box-shadow:0px 1px 0px 0px #000;
    /*兼容各大浏览器*/}
    

如上面的代码所示，我们可以通过更改CSS属性或添加兼容性代码来解决hr水平线在不同浏览器中显示的问题。具体实现方式可以根据自身需求来进行选择，建议尽量选择稳定兼容性好的方式，以确保网站在不同浏览器中的兼容性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！