CSS Box Shadow像这个网站

debugcn 发表于 Dev

用户名

我有当前的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阴影效果？

谢谢

马里奥·阿拉克（Mario araque）

您必须考虑到框阴影仅在用户将框悬停时才会出现。

在您的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属性将框置于最前面。并且它与position：relative（或其他任何位置，您需要position：relative）一起使用

问候。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。