问题
Question: How does Google create the dropshadow next to the vertical scrollbar over the Google Map?
This is a screenshot depicting exactly what I'm talking about.
This seems to be regardless of browser (IE, Firefox, Chrome) and platform (Windows, Mac, Linux).
回答1:
It's actually a series of five razor-thin DIVs, each with decreasing opacity, stacked next to each other. You can see this for yourself by using Firebug and clicking on the shadow area.
回答2:
IE 8: Use F12, select the arrow control, then click on the element you're interested in.
In this case, it's 5 divs overlapping, widths 1-5px, all with a style of "filter: alpha(opacity=x); opacity:0.x;", x going from 10 to 02
回答3:
Chances are it's -webkit-box-shadow or -moz-box-shadow, depending on your browser.
EDIT I just checked the page, and it's a series of <div> aligned together. Look for <div id="ds-v"> in the page source (or in some kind of DOM inspector, as that would be easier). It's most likely some kind of hack they've put together to get a cool effect, but I don't know how easily reproducible this is.
回答4:
There are 100% reliable techniques to get PNG transparency in IE, and if used in limited areas which will not bog down the browser. They could easily have used a small PNG that repeats vertically for this, but my guess is they used the DIVs to skip the use of an extra image. On Google Maps website this is a worthwhile optimisation. On any other website it won't hurt to use 5 divs for this, but a PNG "sprite" may be more flexible if you plan to use it also on overlays (for the sides and corners).
来源：https://stackoverflow.com/questions/2497364/html-css-how-does-google-create-this-drop-shadow-over-their-maps