最近做了一个复杂的报表，本来打算用 table 的，后面发现没法实现其复杂功能，就利用了 div 等元素纯搭成表格样式。
在开发中，遇到一个很头疼的问题，因为 div 直接相互紧凑，导致设置 border 为 1px 会显示很粗，而其整体的 DOM 构建方式无法去获取周围是否存在相同领边（层级比较深）。最后想出来的方案就只有设置 border 为 0.5px 了。
因为内部系统，基本上都是 chrome，因此在直接设置 border:0.5px solor lightgray; 是不可用的。后面通过查阅一些资料，也得到了三种比较合适的解决方案。
写了一个例子，链接在此 ===> https://codesandbox.io/s/stupefied-mcnulty-dfylm?file=/index.html:0-1464
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.half-onepx-border {
width: 200px;
height: 100px;
background: lightblue;
text-align: center;
}
.half-onepx-border:nth-of-type(1) {
box-shadow: 0px 0px 0px 0.5px red;
}
.half-onepx-border:nth-of-type(2) {
border: 0.5px solid red;
}
.half-onepx-border:nth-of-type(3) {
position: relative;
}
.half-onepx-border:nth-of-type(3)::before {
position: absolute;
top: 0;
left: 0;
border: 1px solid red;
content: "";
transform: scale(0.5);
-webkit-transform: scale(0.5);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
width: 200%;
height: 200%;
}
</style>
</head>
<body>
<h1>实现元素border为0.5px</h1>
<div class="half-onepx-border">
利用box-shadow <br />
Firefox: ✅ Safari: ❎ Chrome: ✅ Firefox: ✅ Safari: ✅ Chrome: ❎
</div>
<hr />
<div class="half-onepx-border">
直接使用border属性 <br />
Firefox: ✅ Safari: ✅ Chrome: ❎
</div>
<hr />
<div class="half-onepx-border">
使用scale方法与缩小 Firefox: ✅ Safari: ✅ Chrome: ✅
</div>
<hr />
</body>
</html>
详细效果
第一种方法利用的是 box-shadow 的扩散半径可以设置为 0.5px 原理，设置 box-shadow:0px 0px 0px 0.5px red; 即可。
第二种方法因为其 fox 和 Safari 的可兼容，可以直接设置 border<1px。
第三种方法比较巧妙，利用的是 transform 缩放功能，将 1px 缩放一半，同时利用定位，将伪元素覆盖整个 div 元素，从而达到伪元素与本身元素的合并效果。
我这里记录了三种方法，因为我主要考虑的是兼容 chrome，所以选择了第一种方案。感兴趣的朋友可以尝试一下呀，如果能提供更好的解决方案最好啦。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于