CSS技巧: 小于1px的边框

1. 渐变方案

通过CSS3新增linear-gradient实现,整体页面呈现效果较好

.layout {
  position: relative;
  .layout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(0deg, transparent 50%, #000 50%); // 0 edg 向↑ 90edg 向→;-webkit 原理实现 为 90edg 向↑,0 edg 向→
  }
}

2. 缩放方案

.layout {
  position: relative;
  .layout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000; // border-top: 1px solid #000;
    transform: scaleY(0.5);
  }
}

3. 缩放方案加强版(四边)

.layout {
  position: relative;
  .layout::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    transform-origin: 0 0; // 缩放定位设置为左上角
    transform: scale(0.5, 0.5);
  }
}

4. 边框阴影(最简便)

.layout {
  box-shadow: 0 0 1px 1px #000 inset;
}