CSS自定义圆角形状添加box-shadow后非圆角边阴影不贴合如何解决

解决方案 #

你遇到的阴影不贴合问题，核心是box-shadow基于元素标准盒边界生成阴影，当使用/分隔的椭圆复合圆角时，错位的偏移量会导致直边位置阴影无法匹配轮廓。推荐使用CSS filter属性的drop-shadow()函数替代，它会直接识别元素的实际渲染轮廓，自动适配所有自定义圆角、裁剪形状的阴影需求。

修改后的完整代码如下：

<style>
.box {
  border-radius: 10px 100px / 120px;
  padding: 40px;
  border: none;
  width: 40px; 
  height: 40px;
  /* 替换box-shadow为drop-shadow，多个阴影可叠加多个drop-shadow语句 */
  filter: drop-shadow(5px -5px 10px #a200a2)
          drop-shadow(-5px 5px 10px #a200a2);
  background: black;
}
</style>

<div class='box'></div>

补充说明 #

• 如果需要兼容IE等非常旧的浏览器，也可以通过叠加多层偏移量更小的box-shadow模拟贴合效果，但开发成本更高，效果也不如drop-shadow精准。
• drop-shadow不支持内阴影，如果你需要内阴影效果，可以给元素套一层父容器，给父容器加overflow: hidden后用内边距+伪元素模拟内阴影即可。

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