css制作细线

使用 border 属性

通过设置 border 属性为 1px solid 可以创建细线。调整颜色和样式以满足需求：

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

使用伪元素

利用 ::before 或 ::after 伪元素生成细线，适合在特定元素内部或周围添加线条：

.element::after {
  content: '';
  display: block;
  height: 1px;
  background-color: #000;
  margin: 5px 0;
}

使用 box-shadow

通过 box-shadow 模拟细线，适合需要无布局影响的装饰线：

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

使用渐变背景

linear-gradient 可创建水平或垂直的细线，适合灵活控制线条位置：

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

使用 outline

outline 属性生成不占空间的细线，但无法直接控制单边：

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

注意事项

• 在高分辨率屏幕上，1px 可能显示较粗，可尝试使用 0.5px（部分浏览器支持）。
• 考虑使用 transform: scaleY(0.5) 压缩元素高度实现更细线条。