框阴影未显示在div元素上

时间:2019-09-24 21:56:00

标签: css

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

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

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

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

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

您必须在父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,文本可以在该范围之外,并且效果并不适用于所有内容。