如何调整CSS groove边框的明暗度以匹配目标效果？

原生groove边框是浏览器内置渲染样式，没有直接调整明暗的CSS属性，要实现目标效果，得用自定义方案模拟立体感更强的凹槽边框，以下是两种可行方法：

方法一：多层box-shadow模拟凹槽边框 #

通过叠加不同明暗的内阴影，快速实现高对比度的凹槽效果：

.table-cell {
  /* 保留你原有的布局样式，比如宽高、display等 */
  width: 100px;
  height: 40px;
  display: inline-block;
  /* 自定义凹槽边框 */
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.9), /* 内上高光，数值越大越亮 */
    inset 1px 0 0 rgba(255,255,255,0.9), /* 内左高光 */
    inset 0 -1px 0 rgba(0,0,0,0.4), /* 内下阴影，数值越大越暗 */
    inset -1px 0 0 rgba(0,0,0,0.4); /* 内右阴影 */
  background-color: #e5e5e5; /* 配合边框的底色，可按需调整 */
}

调整阴影rgba最后一位的透明度数值，就能灵活控制明暗对比，数值越高，高光越亮、阴影越暗。

方法二：border-image自定义渐变边框 #

用线性渐变精准定义边框的明暗过渡，完全匹配目标效果：

.table-cell {
  width: 100px;
  height: 40px;
  display: inline-block;
  border: 3px solid transparent;
  /* 渐变比例和色值可根据目标图微调 */
  border-image: linear-gradient(135deg, #f0f0f0 0%, #f0f0f0 45%, #555 55%, #555 100%) 1;
}

如果需要更细腻的纹理，还可以把渐变替换成预制的凹槽边框图片。

额外提示 #

模拟表格时，给单元格设置margin: -1px，可以抵消相邻单元格的重复边框，配合自定义边框样式，就能实现和目标图一致的整体表格效果。

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