为什么设置为1px高度的div分割线实际显示厚度不一致？

分割线高度不一致的常见原因 #

• 高DPI屏幕的子像素渲染问题：1px的逻辑像素在不同缩放比例的屏幕下，会因为浏览器的像素对齐逻辑，出现渲染粗细不一致的情况，页面缩放比例非100%时该问题会更明显
• 空div的默认布局影响：部分浏览器会给无内容的块级元素添加默认行高，可给.seg-2-line添加line-height: 0;或font-size: 0;消除该影响
• 外边距折叠：相邻元素的margin叠加会导致分割线的视觉间距产生差异，看起来像是粗细不一致

优质分割线实现方法 #

• 方法1：使用语义化<hr>标签 #

  自带内容分割语义，不需要额外定义无意义的div容器，也能被屏幕阅读器正常识别。
  示例样式：

  hr {
    /* 清除浏览器默认样式 */
    border: none;
    margin: 0;
    /* 自定义样式 */
    height: 1px;
    width: 60%;
    margin: 15px auto;
    background: hsl(240deg 19% 88%);
    /* 拓展：可实现渐变、虚线等效果 */
    /* background: linear-gradient(to right, transparent, hsl(240deg 19% 88%), transparent); */
    /* border-bottom: 1px dashed hsl(240deg 19% 88%); */
  }
  

• 方法2：复用现有容器的border属性 #

  不需要额外新增DOM节点，直接给中间内容容器添加上下边框即可，代码更精简。
  对应你的场景直接修改现有代码即可：

  .seg-2-flex-container {
    display: flex;
    justify-content: space-around;
    margin: 15px auto;
    /* 新增两行代码代替两个分割线div */
    border-top: 1px solid hsl(240deg 19% 88%);
    border-bottom: 1px solid hsl(240deg 19% 88%);
    padding: 15px 0; /* 调整内边距控制分割线和内容的间距 */
  }
  

  调整后HTML可直接删除两个.seg-2-line节点，结构更干净。

• 方法3：用伪元素生成分割线 #

  适合不想改动现有DOM结构的场景，通过父容器的::before和::after伪元素生成上下分割线：

  .seg-2 {
    position: relative;
    background: linear-gradient(358deg, rgba(51, 82, 124, 1) 0%, rgba(18, 59, 114, 1) 100%);
    padding: 5% 0px;
  }
  .seg-2::before, .seg-2::after {
    content: '';
    display: block;
    height: 1px;
    width: 60%;
    margin: 0 auto;
    background: hsl(240deg 19% 88%);
  }
  

• 高DPI屏细线适配技巧 #

  如果需要保证1px线在所有设备上显示一致，可使用缩放方案实现更细腻的效果：

  .seg-2-line {
    height: 1px;
    background: hsl(240deg 19% 88%);
    /* 2倍屏下缩放到0.5px物理像素，避免模糊 */
    transform: scaleY(0.5);
  }
  /* 也可以用box-shadow模拟1px线，规避子像素渲染问题 */
  .seg-2-line {
    box-shadow: 0 0.5px 0 hsl(240deg 19% 88%);
  }
  

内容的提问来源于stack exchange，提问作者lemmons