CSS“逼真”阴影（光源）
看看下面的图片：
蓝色框是div。 现在我要做的是实现一种2.5Dfunction：
我希望灰色阴影有点像3D-ish。 起初我正在考虑将盒子阴影值分配给“Y”轴，如下所示：
"box-shadow: -5px -5px 10px" + value.tallness + "#888" 但结果是上面的图像。
关于如何仅在一侧制作阴影的任何想法，就像来自某个地方的光源一样？
额外 – 移动的 “光源”怎么样？
你去： http ： //jsfiddle.net/KaCDN/15/
拖动光源以影响阴影。
更高的块：
- 有较大的顶部，左边框
- 进一步投下阴影
- 他们的阴影更加模糊
如何更简单地移动阴影：
$(document).on('mousemove', function(e) { var elm = $("#test"), x = ~Math.round((e.pageX - elm[0].offsetLeft - 150) / 30), y = ~Math.round((e.pageY - elm[0].offsetTop - 150) / 30), z = 10+Math.abs(x)+Math.abs(y), cssVal = x+'px '+y+'px '+z+'px 10px #525252'; elm.css({'-webkit-box-shadow' : cssVal, 'box-shadow' : cssVal }); });
FIDDLE
更新的答案是使用像Shine.js（ http://bigspaceship.github.io/shine.js/ ）这样的库来处理这个问题。