CSS3如何实现0.5边框

Posted 2021-04-09 web前端开发课程

在移动端有时1px的边框会显得很粗不美观，淘宝、京东的触屏均是采用浅细的线条来显示在移动设备上。具体实现方法如下：

普通的1px黑色实线边框：

1.   border: 1px solid #000;

半像素边框当然不是简单地把1px改为0.5px（会被解析成1px），border-width的值只能是自然数

类似的，outline, box-shadow等等也没有办法画出0.5px的细线

常规思路是不可行的，我们可以用伪元素 + 缩放巧妙地实现，具体步骤如下：

设置目标元素作为定位参照

1. .thinner-border {    

2.     position: relative; /* 只要不是默认值static即可 */

3. }

给目标元素添加一个伪元素before或者after，并设置绝对定位

1.   .thinner-border:before {    content: '';    position: absolute; 

2. }

给伪元素添上1px的边框

border: 1px solid red;

设置伪元素的宽高为目标元素的2倍

width: 200%;height: 200%;

缩小0.5倍（变回目标元素的大小）

transform-origin: 0 0;transform: scale(0.5, 0.5);

把border包进来

box-sizing: border-box;

简言之就是先放大再缩回来，border-box是关键，否则边框不会一起缩放

二.具体实现

上面已经分步骤写得很清楚了，拼在一起就是完整实现：

1.     .thinner-border {     

2.         position: relative; 

3.     } 

4.     .thinner-border:before {     

5.         content: '';     

6.         position: absolute;     

7.         width: 200%;     

8.         height: 200%;     

9.         border: 1px solid #000;     

10.         -webkit-transform-origin: 0 0;     

11.         -moz-transform-origin: 0 0;     

12.         -ms-transform-origin: 0 0;     

13.         -o-transform-origin: 0 0;     

14.         transform-origin: 0 0;     

15.         -webkit-transform: scale(0.5, 0.5);     

16.         -ms-transform: scale(0.5, 0.5);     

17.         -o-transform: scale(0.5, 0.5);     

18.         transform: scale(0.5, 0.5);     

19.         -webkit-box-sizing: border-box;     

20.         -moz-box-sizing: border-box;     

21.         box-sizing: border-box; 

22.     }

功能是给class值指定了thinner-border的block和inline-block元素添上半像素的边框，因为inline元素的width和height有一些限制，伪元素获取到的200%要比实际值小，边框的宽高也会比期望的小。

文章来源：https://segmentfault.com/a/1190000009662278