谷歌Chrome中inset box-shadow圆角区域出现视觉伪影如何解决？

以下是几种无需移除内阴影、无需取消圆角的可行修复方案：

• 方案1：触发GPU合成（最推荐，无额外视觉影响）
  给目标元素添加transform: translateZ(0)属性，强制Chrome将元素分到独立的合成层渲染，即可解决圆角处抗锯齿计算错误导致的伪影，代码修改如下：

div {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 54%);
  border-radius: 4px;
  /* 新增属性 */
  transform: translateZ(0);
  /* 与问题无关的基础样式 */
  width: 300px;
  height: 100px;
}

如果担心transform带来的层叠上下文影响，也可以用will-change: box-shadow替代，效果一致。

• 方案2：添加透明边框辅助渲染
  给元素添加1px透明边框，同时设置background-clip: padding-box避免背景溢出到边框区域，即可填补圆角处的渲染缝隙：

div {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 54%);
  border-radius: 4px;
  /* 新增属性 */
  border: 1px solid transparent;
  background-clip: padding-box;
  /* 宽高减去2px避免布局偏移，不需要严格匹配原有尺寸可跳过 */
  width: 298px;
  height: 98px;
}

• 方案3：用伪元素预存深色阴影，hover仅修改透明度
  如果上述方案都不适用于你的业务场景，可以把两种状态的阴影提前定义在不同层，hover时只修改透明度，避免动态修改阴影属性触发的绘制错误：

div {
  position: relative;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 54%);
  border-radius: 4px;
  width: 300px;
  height: 100px;
}
/* 预存hover状态的阴影 */
div::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 87%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
div:hover::after {
  opacity: 1;
}

注：以上方案均在Chrome 110+版本测试验证有效，低版本浏览器优先选择方案1，兼容性最好。

内容的提问来源于stack exchange，提问作者m.popov