0.5 px的边框

实现的原理：使用伪元素设置1px的边框，然后对边框进行缩放(scaleY)。

设定目标元素的参考位置。
给目标元素设置伪元素before或者after，并设置绝对定位。
给伪元素添加1px的边框。
宽和高设置为 200%。
调整盒子模型的位置，以左上角为基准 transform-origin: 0。
整个盒子模型缩小为0.5。

<!DOCTYPE html>
<html>
<head>
  <title>慕课网网页布局</title>
  <meta charset="UTF-8">
  <style>
    .box1 {
      background-color: red;
      border: 1px solid black;
      width: 100px;
      height: 100px;
      margin-left: 400px;
      margin-top: 100px;
    }

    .box2 {
      background-color: red;
      border: 0.5px solid black;
      width: 100px;
      height: 100px;
      margin-left: 400px;
      margin-top: 200px;
    }

    .box3 {
      position: relative;
      background-color: red;
      width: 100px;
      height: 100px;
      margin-left: 400px;
      margin-top: 200px;
    }
    .box3::after {
      position: absolute;
      content: "";
      border: 1px solid black;
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: 0 0;
    }
  </style>
</head>
<body>
  <div class="box1" ></div> // 添加 1px 的边框
  <div class="box2" ></div> // 添加 0.5px 的边框，无效果
  <div class="box3"></div> // 添加 0.5px 的边框，有效果
</body>
</html>

0.5 px的边框

推荐阅读更多精彩内容