CSS - 你实现过0.5px的线吗

 难度级别：中级及以上                                 提问概率：75%

---

 我们知道在网页显示或是网页打印中，像素已经是最小单位了，但在很多时候，即便是最小的1像素，精度却不足以呈现所需的线条精度和细节。因此，为了在网页显示和网页打印中呈现更加细致的线条，为了在视觉上创建更加细致的设计效果，实现0.5px边框线的解决方案应运而生。那么接下来看一下，都有哪些方案可以实现一条0.5px的边框线呢。

目录

1 缩放实现

2 box-shadow阴影偏移

3 用SVG画

4 直接插入图片

---

1 缩放实现

缩放可以在元素自身的基础上缩小或者放大，很多浏览器对于字体最小支持到12px，但如果想要实现更小的字号，就需要使用缩放功能。而对于边框线也同样适用，如果把边框线设定为1px，然后再缩放到0.5倍，就可以实现一条0.5px的边框线了。

HTML代码：
<div class="small-border"></div>
CSS代码：
<style>
.small-border {
width: 100px;
height: 0;
border-top: 1px solid red;
transform: scaleY(0.5);
}
</style>

2 box-shadow阴影偏移

box-shadow常用于为元素添加阴影边框，而在本案例中，可以将元素设置为无边框，然后利用box-shadow属性可以设置0.5的特性，进行垂直方向偏移0.5px的阴影。但需要注意的是，这个方案属于模拟实现，只是可以满足视觉上的效果。

HTML代码：
<div class="small-border"></div>
CSS代码：
<style>
.small-border {
width: 100px;
height: 1px;
box-shadow: 0 0.5px 0 red;
}
</style>

3 用SVG画

SVG和Canvas都具有画线的能力，那么如果使用SVG的话，需要svg内部添加line子标签，设置stroke-width的属性值为0.5px，需要注意的是，本案例中，y1和y2的坐标属性值为50.5，而不是50，这是因为需要将0.5px的线条处于两个元素之间，使其具有0.5px的效果。

HTML代码：
<svg>
<line x1="50" y1="50.5" x2="150" y2="50.5" stroke="red" stroke-width="0.5" />
</svg>

4 直接插入图片

如果想要快速实现，可以考虑直接用做图工具画出一根0.5px的线，生成图片后，开发人员可以直接以背景图片的方式，将图片插入到网页中。

实现方式虽然有很多，但我们更希望浏览器可以尽早支持类似div元素可以设置0.5px边框这样的功能。而以上这些实现方式，也都各自存在着一定的弊端。例如缩放功能会改变元素原有的布局；阴影边框如果页面中大量存在会影响浏览器性能；SVG必须以DOM元素的形式插入页面；插入图片又会带来额外的请求等。

---

刷题思考

    其实在我们现实开发工作中，有很多类似“实现一根0.5px的线”这样的需求，你是否想过，一个需求的产生，真的仅仅是领导想要、UI喜欢、用户欣赏吗？或许多思考一下为什么要做这个需求，比绞尽脑汁的去实现更有意思。

---

类似考点

    很多浏览器是不支持0.5px这样需求的，或者说我们最初所学的很多知识本身并不能满足多样化的特殊化的需求，但我们仍然可以利用不断丰富起来的知识突破牢笼，实现更完美的效果，面试官还可能会问，例如你是如何实现10px的字体的？例如请你说一说如何实现一个三角形？例如如何实现一个一直转动的loading图，而不用gif动图等。