CSS “realistic” shadows (light source)

问题

Have a look at the picture below:

The blue boxes are divs. Now what I am trying to do is to implement a sort of 2.5D functionality:

I would like the grey shadows to be somewhat 3D-ish. At first I was thinking to assign to the box-shadow value the "Y" axis like this:

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

but the result is the above image.

Any idea on how to make the shadow on one side only, like there was a light source from somewhere?

EXTRA - what about a moving "light source"?

回答1:

There you go: http://jsfiddle.net/KaCDN/15/

Drag light source to affect shadows.

Taller blocks:

• have larger top,left border
• drop shadow further
• they're shadow is blurier

回答2:

How to move the shadow a little simpler:

$(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

回答3:

A more up-to-date answer would be to use a library like Shine.js (http://bigspaceship.github.io/shine.js/) which would handle this exact problem for you.

来源：https://stackoverflow.com/questions/12027161/css-realistic-shadows-light-source