美文网首页css样式
如何兼容模式画0.5px的线

如何兼容模式画0.5px的线

作者: 小飞侠zzr | 来源:发表于2018-03-26 09:05 被阅读0次

    方案 svg + base64

    <style>
    .hr.svg {
    background: none;
    height: 1px;
    background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
    }
    </style>
    <p>svg</p>
    <div class="hr svg"></div>

    svg图片这个样设置:

    <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
    <line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line>
    </svg>
    就实现了完美兼容(引自掘金大牛)

    相关文章

      网友评论

        本文标题:如何兼容模式画0.5px的线

        本文链接:https://www.haomeiwen.com/subject/tuylcftx.html