酒月

Appearance

MiTu

MiTu

A Web developer who loves to Reading and photography

怎么画一条 0.5px 的线 ​

思路 ​

首先，直接这样设置， 0.5px 的边框，肯定是不对的，边框大小会向上取整。

css
border: 0.5px solid red;

box-shadow 阴影实现的思路 ​

既然 border 不能设置小数的边框，那我们能不能找一个属性有相似的效果来替代它呢，当然可以，我们可以用 box-shadow 属性用阴影达到 0.5px 的边框效果，box-shadow 阴影属性是允许小数值的，我们可以用它达到单条边框和四条边框。

::after 定位伪类实现的思路 ​

直接设置伪类元素，设置指定的高度，通过定位来控制位置。

transform 缩放实现的思路 ​

我们可以设置任意大小的边框，改变中心点，通过缩放效果（找好倍率）来达成想要的结果。

border-image: linear-gradient 边框线性渐变的思路 ​

同样设置任意大小的边框，通过渐变属性改变一部分边框的颜色效果，比如将一部分边框融入背景，这样就能得到想要的效果。

方案 ​

box-shadow 阴影实现 ​

这种方法完全借助盒子阴影来达到指定效果，通过 0.5px 的阴影，让它达到类似 0.5px 边框的效果。

html
<head>
  <style>
    div {
      box-sizing: border-box;
      background-color: blueviolet;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      /* border: 1px solid red; */
      box-shadow: 0px 0px 0px 0.5px green;
    }
  </style>
</head>

<body>
  <div></div>
</body>

::after 定位伪类实现 ​

这种方法直接设置 0.5px 的高度，高度同样允许小数 px，我们生成了一个新元素，来改变它的高度，让它充当边框。

html
<head>
  <style>
    div {
      position: relative;
      box-sizing: border-box;
      background-color: blueviolet;
      width: 200px;
      height: 200px;
      margin-top: 10px;
      /* box-shadow: 0px 0px 0px 0.5px green; */
    }

    div::after {
      position: absolute;
      content: '';
      background-color: red;
      width: 100%;
      height: 0.5px;
      bottom: 0px;
    }
  </style>
</head>

<body>
  <div></div>
</body>

transform 缩放实现 ​

利用缩放属性，我们设置一个 1px 边框，长度和宽度设置为被包裹子元素的两倍，当它缩小 0.5 的时候，就正好变成了子元素的宽高，1px 的边框也缩小了一半变成了 0.5px

html
<head>
  <style>
    div {
      position: relative;
      box-sizing: border-box;
      background-color: blueviolet;
      width: 200px;
      height: 200px;
      margin-top: 10px;
      /* box-shadow: 0px 0px 0px 0.5px green; */
    }

    div::after {
      position: absolute;
      content: '';
      width: 200%;
      height: 200%;
      border: 1px solid red;
      transform-origin: 0 0;
      transform: scale(0.5);
    }
  </style>
</head>

<body>
  <div></div>
</body>

border-image: linear-gradient 边框线性渐变 ​

这个其实是第二种属性的复杂版了，没有直接设置 0.5px，而是设置了 1px 上面一半透明，来达到 0.5px 的边框效果，我们也可以直接设置 1px 的边框，然后同样透明 0.5px

html
<head>
  <style>
    div {
      position: relative;
      box-sizing: border-box;
      background-color: blueviolet;
      width: 200px;
      height: 200px;
      margin-top: 10px;
      /* box-shadow: 0px 0px 0px 0.5px green; */
    }

    div::after {
      display: block;
      position: absolute;
      content: '';
      width: 100%;
      height: 1px;
      bottom: 0px;
      background-color: red;
      background: linear-gradient(to bottom, transparent 50%, red 50%);
    }
  </style>
</head>

<body>
  <div></div>
</body>