如何为Div边界设置150°平行斜线填充？

要替换原来的灰色内阴影为150°平行斜线填充，box-shadow无法实现这类图案效果，我们可以利用CSS多层背景渐变结合盒模型属性来达成需求：

核心思路 #

1. 移除原有的inset盒阴影，改用padding模拟出5mm的内边界区域
2. 使用repeating-linear-gradient创建150°的平行斜线图案
3. 通过background-clip控制背景显示范围，让斜线仅填充padding区域，内容区域保留白色背景
4. 设置box-sizing: border-box确保元素总尺寸与原代码一致（避免padding改变元素整体大小）

修改后的代码 #

test.component.scss

#template {
  position: relative;
}

.live-preview {
  /* 移除原盒阴影 */
  /* box-shadow: 0px 0px 0px 5mm var(--ds-color-grey-200) inset; */
  
  /* 关键样式 */
  box-sizing: border-box; /* 确保width/height包含border和padding */
  padding: 5mm; /* 模拟原内阴影的5mm区域 */
  background: 
    /* 白色背景，仅覆盖内容区域 */
    white content-box,
    /* 150°重复斜线渐变，仅覆盖padding区域 */
    repeating-linear-gradient(
      150deg,
      var(--ds-color-grey-200),
      var(--ds-color-grey-200) 2px, /* 斜线宽度 */
      transparent 2px,
      transparent 8px /* 斜线间距 */
    ) padding-box;
}

可选调整 #

• 斜线密度/粗细：修改渐变中的2px（斜线宽度）和8px（斜线间距）数值即可
• 斜线颜色：替换var(--ds-color-grey-200)为你需要的颜色值

效果说明 #

修改后，元素会保留原有的黑色外边框，内部5mm区域将显示150°的平行斜线，内容区域仍为白色，完全匹配你的期望效果。

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