HTML/CSS：Google如何在他们的地图上创建此投影？

Question

问题：谷歌如何创建旁边在谷歌地图的垂直滚动条的阴影效果？

这是一个屏幕截图，展示的正是我想说的。

这似乎是不管浏览器（IE，火狐，Chrome和平台在Windows，Mac和Linux）。

Answer 1

它就有可能是-webkit-box-shadow或-moz-box-shadow，这取决于你的浏览器。

编辑我刚刚检查了页面，它是一系列排列在一起的<div>。在页面源代码中寻找<div id="ds-v">（或者在某种DOM检查器中，因为这样会更容易）。这很可能是他们为了获得一个很酷的效果而进行的一些破解，但我不知道这是多么容易重现。

Answer 2

它实际上是一系列五个微薄的DIV，每降低不透明度，旁边堆放在一起。你可以通过使用Firebug并单击阴影区域来看到这一点。

Answer 3

IE 8：使用F12，选择箭头控制，然后点击你感兴趣的元素

在这种情况下，它是5个格重叠，宽度1-5px，所有的“风格。滤波器：α（不透明度= X）;不透明度：0.X;”中，X为10要02

Answer 4

有100级％的可靠的技术来获得在IE PNG透明度，并且如果在其中不会陷入有限区域内使用向下浏览器。他们可以很容易地使用一个垂直重复的小PNG，但我的猜测是他们使用DIV跳过使用额外的图像。在Google地图网站上，这是一个有价值的优化。在任何其他网站上使用5 div都不会有什么伤害，但是如果您打算在叠加层（侧面和角落）上使用它，PNG“精灵”可能会更加灵活。