fractional border

FractionalBorder.css

:root {
  /* 顶部极细边框（白色背景使用） */
  --topLightFractionalBorder {
    border-top: 1px solid #eee;
    border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect width='1' height='.5' fill='#eee'/></svg>");
    border-image-slice: 1 0 0;
  }

  /* 底部极细边框（白色背景使用） */
  --bottomLightFractionalBorder {
    border-bottom: 1px solid #eee;
    border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect width='1' height='.5' y='.5' fill='#eee'/></svg>");
    border-image-slice: 0 0 1;
  }

  /* 顶部极细边框（黑色背景使用） */
  --topDarkFractionalBorder {
    border-top: 1px solid #333;
    border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect width='1' height='.5' fill='#333'/></svg>");
    border-image-slice: 1 0 0;
  }

  /* 底部极细边框（黑色背景使用） */
  --bottomDarkFractionalBorder {
    border-bottom: 1px solid #333;
    border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect width='1' height='.5' y='.5' fill='#333'/></svg>");
    border-image-slice: 0 0 1;
  }
}