设置display:table-cell时，border-radius与内阴影无法对齐的问题

当给元素设置display: table-cell时，添加的内阴影(box-shadow: inset)圆角会和设置的border-radius不匹配——阴影的圆角会和边框外侧的圆角半径一致，而非贴合元素内部的圆角。但移除display: table-cell属性后，渲染就会恢复正常。

问题复现代码 #

#square {
  width: 40px;
  height: 40px;
  border: 3px solid #636363;
  border-radius: 8px;
  display: table-cell;
  box-shadow: inset 2px 2px 4px #5f5f5f;
}

<div id="square"></div>

原因分析 #

这是浏览器对table-cell元素的盒模型渲染逻辑导致的：table-cell元素的内阴影计算是基于元素的外部整体尺寸（包含边框），而非普通块级元素的内部内容盒尺寸，所以阴影的圆角会错位，和边框外侧的圆角对齐，而非我们设置的border-radius对应的内部圆角。

解决方案 #

方案1：替换布局方式

如果不需要依赖table-cell的布局特性，直接移除display: table-cell，改用inline-block、flex或grid等布局方式即可解决。

方案2：保留table-cell的嵌套方案

如果必须使用display: table-cell实现布局，可通过外层容器来承载边框、圆角和内阴影，内层table-cell元素仅负责布局：

#wrapper {
  width: 40px;
  height: 40px;
  border: 3px solid #636363;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px #5f5f5f;
}
#square {
  width: 100%;
  height: 100%;
  display: table-cell;
}

<div id="wrapper">
  <div id="square"></div>
</div>

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