本来想用svg画线可以避免在不同浏览器下1px像素带来的毛刺和模糊的，可是现在我在移动端用svg画线
不知道是不是rem的影响，画出来的线粗细不一，颜色还有差异，我用的黑色背景#000
<div class="showerPic">
<div class="posilocation">
<svg width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="xMaxYMax meet">
<!--上部-->
<line x1="0.0rem" y1="0.0rem" x2="3.0rem" y2="0rem" stroke="#000" stroke-width="0.1rem"/>
<line x1="3.0rem" y1="0.0rem" x2="5.0rem" y2="5.0rem" stroke="#000" stroke-width="0.1rem"/>
<line x1="5.0rem" y1="5.0rem" x2="7.0rem" y2="0.0rem" stroke="#000" stroke-width="0.1rem"/>
<!--中部-->
<line x1="0.0rem" y1="5.0rem" x2="100%" y2="5.0rem" stroke="#000" stroke-width="0.1rem"/>
<!--下部-->
<line x1="0.0rem" y1="10.0rem" x2="3.0rem" y2="10.0rem" stroke="#000" stroke-width="0.1rem"/>
<line x1="3.0rem" y1="10.0rem" x2="5.0rem" y2="5.0rem" stroke="#000" stroke-width="0.1rem"/>
<line x1="5.0rem" y1="5.0rem" x2="7.0rem" y2="10.0rem" stroke="#000" stroke-width="0.1rem"/>
<!--圈圈-->
<circle cx="4.9rem" cy="4.9rem" r="0.6rem" fill="#000" stroke="#000"/>
</svg>
<span class="c1">新生美白</span>
</div>
</div>
设置html的rem值
<script type="text/javascript">
var winWidth = document.documentElement.clientWidth;
var htmlWidth = (winWidth / 320) * 10;
if (htmlWidth > 20) {
htmlWidth = 20;
}
document.documentElement.style.fontSize = htmlWidth + "px";
</script>
.showerPic{position: relative;width: 500px;height: 500px;border: 1px solid red;}
.posilocation{width: 4.0rem;height: 4.0rem;position: absolute;top: 30px;left: 150px;}
.showerPic span{position: absolute;z-index: 1;font-size:1.0rem;}
.showerPic span.c1{top:-0.9rem;left:-4.0rem;}