仅当孩子在 Chrome 中位于父级之外时出现奇怪的 CSS 投影行为答案

【问题标题】：Strange CSS drop-shadow behavior when child is positioned outside of parent in Chrome only仅当孩子在 Chrome 中位于父级之外时出现奇怪的 CSS 投影行为
【发布时间】：2021-11-10 14:56:28
【问题描述】：

目前我正在为客户开发一个网站，并注意到 CSS 投影过滤器的一个非常奇怪的行为。

我有一个绿色框作为带有投影的容器：

.box {
  background-color: #92be1f;
  color: #ffffff;
  filter: drop-shadow(1.5rem -1rem 0 rgba(0, 0, 0, 0.3));
  margin: 0 auto;
  max-width: 70%;
  padding: 2rem 1rem 32rem 1rem;
}

还有一个位于父级之外的子级：

.image {
 background-color: #000000;
 height: 2.5rem;
 transform: translateY(-4rem);
 width: 2.5rem;
}

正如您在this picture 中看到的那样，绿色框的阴影在窗口的底部边缘被截断。只有当孩子在容器之外时才会发生这种情况。这是 Chrome 中的错误还是我遗漏了什么？

我创建了一个JSFiddle link 来更好地演示这个问题。如果您向下滚动并查看底部边缘的投影，您可以最好地看到这种效果。

感谢您的回答！

【问题讨论】：

如果可以使用 box-shadow 实现，为什么还要使用投影？
您好 Zian，感谢您的回答！在客户项目中，绿色框有圆角。

标签： css dropshadow

【解决方案1】：

您可以在.box 上添加另一个.wrapper 并使.image 成为绝对值。检查工作示例。

body {
  background-color: #ffffff;
  padding: 2rem 1rem;
}
.wrapper
{
  position:relative;
  max-width:70%;
  margin:0 auto;
}
.box {
  background-color: #92be1f;
  color: #ffffff;
  filter: drop-shadow(1.5rem -1rem 0 rgba(0, 0, 0, 0.3));
  margin: 0 auto;
  max-width: 100%;
  padding: 2rem 1rem 32rem 1rem;
  
}

.image {
  background-color: #000000;
  height: 2.5rem;
  margin:-35px 0 0 15px;
  width: 2.5rem;
  position:absolute;
  z-index:2;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="image"></div>
<div class="box">
    Test
  </div>
</div>
 
</body>
</html>

【讨论】：