css制作细线

使用 border 属性

通过设置 border: 1px solid 可以快速生成细线，颜色和样式可自定义。例如：

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

使用伪元素

通过 ::before 或 ::after 伪元素生成细线，适合需要更灵活控制的场景：

.element::after {
  content: '';
  display: block;
  height: 1px;
  background-color: #ccc;
}

使用 box-shadow

box-shadow 可以生成极细的线（小于 1px），适合高分辨率屏幕：

.shadow-line {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}

使用渐变背景

线性渐变可生成自定义方向的细线：

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

使用 transform 缩放

通过缩放实现亚像素级细线（适合移动端）：

.scale-line {
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

注意事项

• 移动端推荐使用 transform 或 box-shadow 实现更细的线
• 考虑使用 prefers-color-scheme 为暗黑模式适配线条颜色
• 需要清除默认边框时添加 border-collapse: collapse（表格场景）