困扰我的 0.5px 边框效果终于解决了

最近做了一个复杂的报表,本来打算用 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>

详细效果

image.png

第一种方法利用的是 box-shadow 的扩散半径可以设置为 0.5px 原理,设置 box-shadow:0px 0px 0px 0.5px red; 即可。

第二种方法因为其 fox 和 Safari 的可兼容,可以直接设置 border<1px。

第三种方法比较巧妙,利用的是 transform 缩放功能,将 1px 缩放一半,同时利用定位,将伪元素覆盖整个 div 元素,从而达到伪元素与本身元素的合并效果。


我这里记录了三种方法,因为我主要考虑的是兼容 Chrome,所以选择了第一种方案。感兴趣的朋友可以尝试一下呀,如果能提供更好的解决方案最好啦。

  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    150 引用 • 401 回帖
  • border
    1 引用 • 2 回帖

赞助商 我要投放

2 回帖
请输入回帖内容 ...