javascript - 为尚未点击的元素添加阴影

Question

基于以下平铺布局：http: //jsfiddle.net/bzCbh/7/

任何人都可以提出一个解决方案来为未点击的元素添加阴影，使其看起来好像在瓷砖下面有深度？

谢谢

** 抱歉，这里的解决方案在于将仅包含框阴影的类规则添加到当前图块层，并且： .layer .tile img { position: relative;} Position Relative 停止了框阴影重叠到相邻元素上。**

Answer 1

这可以通过 CSS 完成：

.element{
   box-shadow:0 0 10px #999;
}

.element.clicked{
   box-shadow:0 0 0 #999
}

和 JS：

$('.element').on('click', function(){
   $(this).addClass('clicked');
}

这是直接的 CSS3...确保包含浏览器前缀以实现跨浏览器兼容性。

Answer 2

查看 jQuery Shadow 插件http://syddev.com/jquery.shadow/

Answer 3

根据您需要支持的浏览器，您可以使用 CSS3Box-Shadow属性：

 .tile {
       -moz-box-shadow: 3px 3px 4px #000;
       -webkit-box-shadow: 3px 3px 4px #000;
        box-shadow: 3px 3px 4px #000;
       }