Question

我在Chrome中有一个带圆角的div，溢出设置为隐藏。

它按预期工作：儿童内容在角落被切断。

但是，当应用过滤器时（在我的情况下，投影），子内容不再被剪切并且具有方角。使用其他过滤器也会发生这种情况，例如模糊。

示例代码：

HTML：

<div class="card">
  <div class="full">
    This div should have rounded corners too.
  </div>
</div>

CSS：

.card{
  overflow: hidden;
  border-radius: 10px;

  /* Removes hidden corners in Chrome */
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));

  background: gray;
  width: 200px;
  height: 200px;
}

.full{
  background: black;
  color: white;
  width: 100%;
  height: 100%;
}

JS小提琴：https://jsfiddle.net/uc1v5nzk/

Firefox在应用过滤器时正确呈现元素。

在Chrome上是否有任何优雅的解决方法，特别是当可能有或许可能不在角落里的许多子元素时？

Chrome版本：版本66.0.3359.117（官方版本）（64位）

操作系统：Ubuntu 16.04 64位

Answer 1

这是一种奇怪的行为，似乎是Chrome中的一个错误。

您可以使用伪元素创建图层并对其应用过滤器：

.card{
  /* Critical CSS */
  overflow: hidden;
  border-radius: 10px;
  background: gray;
  position: relative;
  width: 200px;
  height: 200px;
}

.card::before {
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
  position: absoulte;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.full{
  background: black;
  color: white;
  width: 100%;
  height: 100%;
}

<div class="card">
  <div class="full">
    This div should have rounded corners too.
  </div>
</div>

Answer 2

在包装器上添加绝对定位的::before元素似乎可以修复错误。

.card::before{
  content: '';
  position: absolute;
}

小提琴：https://jsfiddle.net/swordys/uc1v5nzk/2/

Answer 3

如果您想要添加框阴影，则可以将filter: drop-shadow属性替换为box-shadow，如下所示：

/* filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3)); */
box-shadow: 4px 4px 8px rgba(0,0,0,0.3);

一般来说，对于阴影，由于宽browser support，我宁愿使用box-shadow属性。

在Chrome中应用CSS过滤器时，边框半径和溢出隐藏失败

3 个答案: