css细线怎么制作

使用 border-width 属性

设置 border-width: 1px 可以创建细线边框。结合 border-style 属性使用效果更佳。

.element {
  border: 1px solid #000;
}

使用 transform 缩放

通过缩放可以实现更细的线条效果。将元素高度设为 1px 后使用 transform: scaleY(0.5) 进行垂直缩放。

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

使用 box-shadow

利用 box-shadow 的 spread 参数可以生成极细的投影线条。

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

使用伪元素

通过伪元素创建细线可以避免影响原有布局。

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

使用线性渐变

linear-gradient 可以创建半像素级别的细线效果。

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

注意事项

在高分辨率屏幕（Retina屏）上，1px边框可能显示为2物理像素。上述方法中transform和渐变方案能实现真正的亚像素渲染。

不同浏览器对亚像素渲染支持程度不同，需进行跨浏览器测试。移动端设备可能需要使用viewport meta标签配合。

<meta name="viewport" content="width=device-width, initial-scale=1.0">