0.5px线

最新推荐文章于 2024-12-17 22:06:01 发布

weixin_46739117

最新推荐文章于 2024-12-17 22:06:01 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.csdn.net/weixin_46739117/article/details/115724644

本文探讨了不同浏览器和操作系统如何处理屏幕分辨率和像素渲染，特别是在Mac和iOS/Android设备上的差异。Chrome将0.5px四舍五入为1px，而Firefox和Safari能呈现半个像素的边。通过viewport设置、transform和box-shadow等技术可以实现细腻的边框效果。同时，使用SVG作为背景可以精确控制高清屏上的1px线条。文章提供了相应的代码示例和解决方案。

在Mac/Windows上可以设置屏幕显示的分辨率，Mac默认为设备分辨率的一半，它的dpr = 2，即长和宽用2个像素表示1个像素

1**.直接设置height=0.5px**
1. Chrome把0.5px四舍五入变成了1px，Chrome会把小于0.5px的当成0。
1. 而firefox/safari能够画出半个像素的边，Firefox会把>=0.55px-->1px;Safari是把>=0.75px-->1p
1. 手机上观察IOS的Chrome会画出0.5px的边，而安卓(5.0)原生浏览器是不行的。

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5" />
注意：出图的时候按照2倍图出

 border-bottom: 1px solid black;

transform

 border-bottom: 1px solid black;
 transform: scaleY(0.5);
  transform-origin: 50% 100%; //虚变实线
 //其中是长度缩短为原来0.5倍，X的话就是宽度缩短

4.box-shadow

 height: 1px;
 background: none;
  /* 右，下，虚化程度（0不虚化），颜色 */
 box-shadow: 0 0.5px 0 #000;

设置background为一个svg文件，这个svg单独拷出来是这样的：

由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px
stroke表示描边颜色，默认描边宽度stroke-width="1"，
 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>");