框阴影未显示在div元素上

Question

我正在尝试将框阴影添加到<div>元素中，但是它没有显示。

我已经尝试在班级中添加以px为单位的高度和宽度，并尝试在班级和父级上使用z-index，对我没有任何帮助。

这是代码。 https://codepen.io/mateus-ramos/pen/BaBbyMG

我想在“ .imagem-container”类中添加阴影。

Answer 1

剪切路径正在切断阴影。一种解决方法是为元素创建父div，然后在其上放置框阴影。然后使用滤镜跟随您的imagem-container的路径（否则它将是一个方框阴影）。本文可能会帮助您：https://css-tricks.com/using-box-shadows-and-clip-path-together/

Answer 2

您必须在父div中添加一个drop-shadow过滤器，这样才能显示效果。在您的代码中将其添加到.job类

.job { /*parent div of .imagem-container*/
  display: flex;
  padding: 5%;
  height: 500px;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

您所遇到的问题是阴影也应用于文本。您只需要为.imagem-container div创建一个父div，文本可以在该范围之外，并且效果并不适用于所有内容。