jquery - CSS“真实”阴影（光源）

Question

看看下面的图片：

蓝色框是 div。现在我要做的是实现一种 2.5D 功能：

我希望灰色阴影有点 3D 风格。起初我想给 box-shadow 值分配“Y”轴，如下所示：

"box-shadow: -5px -5px 10px" + value.tallness +  "#888"

但结果是上面的图像。

关于如何只在一侧制作阴影的任何想法，就像某个地方有光源一样？

EXTRA -移动的“光源”怎么样？

Answer 1

你去：http: //jsfiddle.net/KaCDN/15/

拖动光源以影响阴影。

更高的方块：

• 有更大的顶部，左边框
• 进一步阴影
• 他们的影子更模糊

Answer 2

如何更简单地移动阴影：

$(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 });
});

​<a href="http://jsfiddle.net/2f5kw/3/" rel="nofollow"> FIDDLE

Answer 3

一个更新的答案是使用像 Shine.js ( http://bigspaceship.github.io/shine.js/ ) 这样的库来为你处理这个确切的问题。