美文网首页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