css细线制作

CSS细线制作方法

使用border属性设置细线
通过设置border-width为1像素或更小值创建细线。例如：

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

使用box-shadow模拟细线
box-shadow可以创建无占位的细线效果：

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

解决Retina屏幕显示问题

使用transform缩放实现亚像素细线
通过缩放可将线条宽度显示为小于1物理像素：

.hairline {
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: 50% 100%;
}

媒体查询适配高DPI设备
针对高分辨率屏幕使用更细的线条：

@media (-webkit-min-device-pixel-ratio: 2) {
  .retina-line {
    border-width: 0.5px;
  }
}

特殊场景实现技巧

表格细边框实现
通过合并边框和伪元素实现完美细线表格：

table {
  border-collapse: collapse;
}
td {
  position: relative;
}
td:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #ddd;
}

渐变背景模拟细线
利用线性渐变创建视觉上的细线：

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

注意事项

• 移动端开发推荐使用transform方案，兼容性更好
• 需要考虑浏览器对小数像素的渲染差异
• 实际效果应在目标设备上进行视觉测试
• 某些方法可能需要配合position: relative使用