怎么绘制出0.5px的线条

[sweetXiaoyan]

怎么绘制出0.5px的线条

scale方法

<style>
.hr.scale-half {
    height: 1px;
    transform: scaleY(0.5);
}
</style>
  <p>1px + scaleY(0.5)</p>
  <div class="hr scale-half"></div>

viewport

利用动态的改变<viewport>让网页的像素区域和屏幕的像素区域重合，这样就很轻松的去写1px的边框，并且它会等于屏幕本身的1px。

/当 devicePixelRatio = 2 输出：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

//当 devicePixelRatio = 3 输出：

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

svg+background

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>

设置 background 为svg文件:

<style>
.line.svg {
    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+background</p>
<div class="line svg"></div>