0.5 px的邊框

weixin_34116110發表於2018-11-27

實現的原理 ：使用偽元素設定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>

相關文章