如何用CSS实现如图所示的凹槽纹理背景？

原代码的问题在于仅使用单层渐变，且渐变断点、背景尺寸的设置不符合凹槽纹理的明暗对比需求，无法呈现出目标图的立体凹槽效果。以下是两种贴近目标效果的实现方案：

方案一：细密凹槽纹理 #

body {
  background-color: #1a1a1a;
  background-image: 
    repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 2px, transparent 2px, transparent 8px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 2px, transparent 2px, transparent 8px);
  background-position: 0 0, 1px 1px;
  background-size: 8px 8px;
}

方案二：宽间距凹槽纹理（更贴近目标图密度） #

body {
  background-color: #0f0f0f;
  background-image: 
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 3px, transparent 3px, transparent 12px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.3) 3px, transparent 3px, transparent 12px);
  background-position: 0 0, 1px 1px;
  background-size: 12px 12px;
}

实现说明 #

• 采用两层repeating-linear-gradient分别模拟凹槽的高光层和阴影层，通过1px的位置偏移形成立体凹槽的视觉效果
• 调整rgba的透明度值，可以控制凹槽的深浅程度；修改渐变断点的像素值，能调整凹槽线条的粗细
• background-size定义了纹理单元的重复尺寸，数值越大，凹槽间距越宽

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