css细线制作

CSS细线制作方法

使用border属性设置1像素边框，结合transform或box-shadow优化显示效果。

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

高分辨率屏幕适配方案

通过transform: scale()实现物理像素级别的细线效果，避免Retina屏显示模糊。

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

伪元素实现方案

利用::after或::before伪元素创建绝对定位的细线，适合特殊场景需求。

.element::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
}

渐变背景方案

使用linear-gradient创建视觉上的细线效果，适合非标准方向线条。

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

媒体查询适配

针对不同设备像素比进行适配，确保各设备显示一致。

@media (-webkit-min-device-pixel-ratio: 2) {
  .retina-line {
    transform: scaleY(0.5);
  }
}