CSS实现0.5px的边框或线
CSS设置1px变粗的原因：
为什么移动端css⾥⾯写了1px, 实际看起来⽐1px粗. 其实原因很好理解：这两个“px”的含义是不⼀样的. 移动端html的header总会加上⼀句：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这句话定义了本页⾯的viewport的宽度为设备宽度，初始缩放值和最⼤缩放值都为1，并禁⽌了⽤户缩放. viewport通俗的讲是浏览器上可⽤来显⽰页⾯的区域, 这个区域是可能⽐屏幕⼤的。css中的像素只是⼀个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。
viewport详细解释推荐：
实现0.5px的边框或线的⽅法：
⽅法⼀：定位+缩放
    利⽤的是 transform 缩放功能，将 1px 缩放⼀半，同时利⽤定位，将伪元素覆盖整个 div 元素，从⽽达到伪元素与本⾝元素的合并效果。
.button {
  position: relative;
}
.button::before {
    content: "";
position: absolute;
top: 0;
left: 0;
min-width: 200%;
height: 200%;
border: 1px solid $color-black54;
transform-origin: 0 0;
transform: scale(.5, .5);
}
⽀持的浏览器：Firefox:  Safari:  Chrome:
需要注意<input type="button">是没有:before, :after伪元素的
⽅法⼆： box-shadow
  利⽤的是 box-shadow 的扩散半径可以设置为 0.5px 原理
box-shadow: 0px 0px 0px 0.5px #f00;
⽀持的浏览器： Firefox:  Safari:  Chrome:  Firefox:  Safari:
⽅法三：线性渐变 linear-gradient
.
box {
div border属性
height: 1px;
background: linear-gradient(#f00 50%, transparent 50%);
}
⽅法四： SVG
.HalfPixelLine{
background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></svg>");
height: 1px;
width: 100%;
}
⽅法五：直接使⽤border属性
border: 0.5px solid #f00;
⽀持的浏览器： Firefox:  Safari:    Chrome:
⽅法六： flexible.js
这是淘宝移动端采取的⽅案, github的地址:. 前⾯已经说过1px变粗的原因就在于⼀⼑切的设置viewport宽度, 如果能把viewport宽度设置为实际的设备物理宽度, css⾥的1px不就等于实际1px长了么. flexible.js就是这样⼲的.
metaEl = ateElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
devicePixelRatio=2时输出meta如下, 这样viewport与ideal viewport的⽐是0.5, 也就与设备物理像素⼀致
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
缺点：不适⽤安卓, flexible内部做了检测⾮iOS机型还是采⽤传统的scale=1.0, 原因在于安卓⼿机不⼀定有devicePixelRatio属性, 就算有也不⼀定能响应scale⼩于1的viewport缩放设置, 例如我的⼿机设置了scale=0.33333333, 显⽰的结果也与scale=1⽆异。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。