Chrome中应用CSS filter时border-radius与overflow:hidden失效问题

嗨，这个问题我之前踩过坑！其实本质是Chrome的合成层渲染机制在搞鬼——当你给.card加上filter属性时，浏览器会把这个元素提升到一个独立的合成层里渲染，这就打破了原本overflow:hidden和border-radius对其子元素的裁剪关联，所以子元素就会露出直角啦。下面给你几个靠谱的解决办法：

解决方案1：用contain: paint强制裁剪范围 #

这是最简洁的方案，contain: paint会告诉浏览器，元素的所有绘制内容都不能超出自身边界，哪怕被提升到合成层，裁剪规则依然生效：

.card {
  overflow: hidden;
  border-radius: 10px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  contain: paint; /* 关键属性，强制限制绘制范围 */
}

.full {
  height: 100px;
  background-color: #f0f0f0;
}

解决方案2：把filter转移到伪元素上 #

如果担心contain属性的兼容性（虽然现代浏览器基本都支持了），可以把阴影效果放到父元素的伪元素上，这样父元素的裁剪规则不受影响：

.card {
  overflow: hidden;
  border-radius: 10px;
  position: relative; /* 伪元素需要基于父元素定位 */
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  z-index: -1; /* 把阴影放到元素后面，不遮挡内容 */
  border-radius: inherit; /* 继承父元素的圆角，保证阴影形状一致 */
}

.full {
  height: 100px;
  background-color: #f0f0f0;
}

解决方案3：给子元素同步圆角（临时应急方案） #

如果只是临时解决，也可以直接给子元素设置和父元素一样的圆角值，不过这个方案适合子元素没有复杂嵌套或动态内容的场景：

.card {
  overflow: hidden;
  border-radius: 10px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.full {
  height: 100px;
  background-color: #f0f0f0;
  border-radius: inherit; /* 继承父元素的圆角 */
  box-sizing: border-box; /* 避免padding导致圆角错位 */
}

个人优先推荐第一种方案，代码最简洁，也符合现代浏览器的渲染逻辑~

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