css伪类实现0.5px边框
在实现UI稿设计时，经常有需要实现0.5px边框的场景，但浏览器最低只可以支持1px的边框，如果要实现0.5px边框，一般有两种方法：css阴影shadow和transform缩放，下面将使用csstransform缩放的方式来实现0.5px边框。
实现效果
实现代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script setup>
<div class="container">
<legend>1px</legend>
兄弟干一杯
<legend>0.5px</legend>
兄弟干一杯
<legend>0.5px上边框</legend>
兄弟干一杯
<legend>0.5px下边框</legend>
兄弟干一杯
下面是代码的详细解析：
模板部分
模板部分包括一个容器，其中包含多个字段集，每个字段集中显示一个具有不同边框样式的盒子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="container">
<legend>1px</legend>
兄弟干一杯
<legend>0.5px</legend>
兄弟干一杯
<legend>0.5px上边框</legend>
兄弟干一杯
<legend>0.5px下边框</legend>
兄弟干一杯
样式部分
样式部分定义了容器和不同类型盒子的样式：
1
主要内容
- 1px边框: .border 类应用一个标准的1px实线边框。- 0.5px边框: .half-border 类使用 ::before 伪元素，通过缩放一个1px的边框来创建0.5px边框的效果。- 0.5px上边框: .half-border-top 类使用缩放的伪元素应用0.5px的上边框。- 0.5px下边框: .half-border-bottom 类使用缩放的伪元素应用0.5px的下边框。
原理解释
通过使用伪元素和变换（scale(0.5)），可以创建看起来是0.5px宽的边框，这在需要实现更精细的边框样式时非常有用，因为浏览器的标准渲染可能不直接支持0.5px的边框
分步拆解
创建两倍尺寸的伪元素，并设置边框为1px，因为html流式布局的原因，伪元素的position必须设置成absolute才能让元素不占用位置，同时父元素要设置position为relative，让伪元素相对于父元素的左上角开始布局：left: 0、top: 0px。- 将伪元素的尺寸设置成两倍、边框设置成1px，如果父元素有设置border-radius，则伪元素的border-radius也要设置成两倍，因为尺寸变成了两倍。 ```html .container { .box { display: inline-flex; align-items: center; padding: 0 6px; height: 24px; background-color: #e6effe; border-radius: 6px; position: relative; .text { font-size: 12px; color: #3981f4; }
&.half-border { &::before { content: ‘ ‘; position: absolute; left: 0; top: 0px; width: 200%; height: 200%; transform-origin: 0 0; box-sizing: border-box; pointer-events: none; z-index: 1; border: 1px solid rgba(57, 129, 244, 1); border-radius: 12px; } } } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
- 将伪元素缩小一倍
使用`transform: scale(0.5)`将伪元素缩小一倍，就能实现0.5px边框的效果。
```html
.container {
.box {
display: inline-flex;
align-items: center;
padding: 0 6px;
height: 24px;
background-color: #e6effe;
border-radius: 6px;
position: relative;
.text {
font-size: 12px;
color: #3981f4;
}
&.half-border {
&::before {
content: ' ';
position: absolute;
left: 0;
top: 0px;
width: 200%;
height: 200%;
transform-origin: 0 0;
transform: scale(0.5);
box-sizing: border-box;
pointer-events: none;
z-index: 1;
border: 1px solid rgba(57, 129, 244, 1);
border-radius: 12px;
}
}
}
}