如何消除linear-gradient绘制的div斜线模糊问题？

问题背景 #

现有一个div需要设置「锁定/禁用」视觉样式，原有样式如下：

原有CSS代码 #

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background: repeating-linear-gradient(45deg, #1c71b8, #1c71b8 10px, #5fb5fc 10px, #5fb5fc 20px);
}

原有HTML代码 #

<div id="box">some content goes here, width and height are dynamic<br><br>it might take some space</div>

需求是给这个div添加贯穿斜线效果，且只能修改该元素样式，不能添加额外辅助div。尝试了以下实现，但线条存在模糊问题，且需要支持调整线条粗细（比如改为10px）：

尝试的CSS代码 #

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background: 
         linear-gradient(to top left,
             rgba(28, 113, 184, 0) 0%,
             rgba(28, 113, 184, 0) calc(50% - 5px),
             rgba(28, 113, 184, 1) 50%,
             rgba(28, 113, 184, 0) calc(50% + 5px),
             rgba(28, 113, 184, 0) 100%),
         linear-gradient(to top right,
             rgba(28, 113, 184, 0) 0%,
             rgba(28, 113, 184, 0) calc(50% - 5px),
             rgba(28, 113, 184, 1) 50%,
             rgba(28, 113, 184, 0) calc(50% + 5px),
             rgba(28, 113, 184, 0) 100%);
}

解决方案 #

模糊问题的核心是线性渐变的色值过渡在对角线方向触发了浏览器抗锯齿渲染，导致线条边缘发虚。以下两种方法可解决问题，同时支持调整线条粗细：

方法一：重复线性渐变绘制精确斜线（推荐） #

利用重复线性渐变绘制固定宽度的斜线，结合背景尺寸控制线条范围，确保斜线贯穿整个div：

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  /* 叠加原有背景和两条禁用斜线 */
  background: 
    repeating-linear-gradient(45deg, #1c71b8, #1c71b8 10px, #5fb5fc 10px, #5fb5fc 20px),
    /* 左上到右下的斜线 */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent calc(100% - 10px), /* 10px为线条粗细，可直接修改 */
      #1c71b8 calc(100% - 10px),
      #1c71b8 100%
    ),
    /* 右上到左下的斜线 */
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent calc(100% - 10px), /* 与上方线条粗细保持一致 */
      #1c71b8 calc(100% - 10px),
      #1c71b8 100%
    );
  /* 斜线背景设为对角线尺寸，确保线条不重复且贯穿元素 */
  background-size: 100% 100%, calc(100% * 1.4142) calc(100% * 1.4142), calc(100% * 1.4142) calc(100% * 1.4142);
  background-position: center;
  background-repeat: no-repeat;
}

方法二：修复原有渐变的过渡节点 #

原有代码中渐变区间的半像素偏移导致模糊，调整过渡节点为精确的对称位置即可消除：

#box {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background: 
    repeating-linear-gradient(45deg, #1c71b8, #1c71b8 10px, #5fb5fc 10px, #5fb5fc 20px),
    linear-gradient(to top left,
      transparent 0%,
      transparent calc(50% - (10px / 2)), /* 10px为线条粗细 */
      #1c71b8 calc(50% - (10px / 2)),
      #1c71b8 calc(50% + (10px / 2)),
      transparent calc(50% + (10px / 2)),
      transparent 100%
    ),
    linear-gradient(to top right,
      transparent 0%,
      transparent calc(50% - (10px / 2)), /* 与上方线条粗细保持一致 */
      #1c71b8 calc(50% - (10px / 2)),
      #1c71b8 calc(50% + (10px / 2)),
      transparent calc(50% + (10px / 2)),
      transparent 100%
    );
}

关键说明 #

• 两种方法均保留了原有背景，同时叠加了禁用斜线效果，符合只能修改元素样式的要求。
• 修改代码中的10px数值即可快速调整线条粗细，且不会出现模糊问题。

内容的提问来源于Stack Exchange，提问作者baitendbidz