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「精靈」可能會更加靈活。