Question

我有当前的CSS框影像代码，我试图模仿这个网站的效果http://danielladraper.com/

-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);

http://jsfiddle.net/GCwBT/

如果向下滚动到该网站的底部并将鼠标悬停在其中一个产品上，您会看到其中一个产品上出现一个方框阴影。然而，当我将它应用于我的div，它们彼此相邻浮动时，只有部分盒子阴影可见，另一部分似乎被阻挡。

我不知道为什么会发生这种情况，即使我们的两个div似乎都在向左浮动。

任何人都能告诉我该网站使用什么类型的js / css组合来实现CSS阴影效果？

由于

Answer 1

您必须考虑只有当用户将框悬停时才会显示框阴影。

在你的jsfiddle中，所有的盒子都有阴影。您必须将其更改为：

.boxes {
  width: 200px;
  height: 200px;
  float: left;
  background-color: #ccc;
  border-style: solid;
  border-width: 1px;
  border-color: #fff;
  position: relative;
}

.boxes:hover {
   -webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);   
  z-index: 999;
}

z-index属性将框放在前面。它适用于职位：亲属（或任何其他人，你需要职位：亲属）

问候。

Answer 2

你的影子必须是阻塞的，因为你没有使用z-index，这个css你还需要在悬停时指定z-index。

.boxes:hover{ -webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5); z-index:10; }
JSFIDDLE

P.S。对于您的案例位置：需要相对属性才能使z-index生效

CSS Box Shadow喜欢这个网站

2 个答案: