css制作细线

使用 border 属性

在 CSS 中，可以通过 border 属性创建细线。设置 border-width 为 1px 或更小的值（如 0.5px），但需注意部分浏览器可能不支持小于 1px 的渲染。

.thin-line {
  border: 1px solid #000;
}

使用 transform 缩放

通过 transform: scaleY() 可以实现更细的线，尤其适合需要小于 1px 的情况。将元素高度设为 1px 后垂直缩放。

.scale-line {
  height: 1px;
  background: #000;
  transform: scaleY(0.5);
}

使用伪元素

通过 ::before 或 ::after 伪元素生成细线，结合 position 和 transform 精确定位。

.element::after {
  content: '';
  display: block;
  height: 0.5px;
  background: #000;
  position: relative;
  top: 10px;
}

使用 box-shadow

box-shadow 可以生成不占空间的细线，适合装饰性需求。通过 inset 或外部阴影实现。

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

使用 linear-gradient

CSS 渐变能创建背景细线，通过颜色断点控制线条粗细和位置。

.gradient-line {
  background: linear-gradient(to bottom, #000 1px, transparent 1px);
  height: 1px;
}

注意事项

• 移动端渲染差异可能导致 0.5px 显示不一致，需测试目标设备。
• 缩放方案可能影响子元素，需隔离使用场景。
• 伪元素方案需注意父元素的 overflow 和定位上下文。