5

问题：Google 如何在 Google 地图上的垂直滚动条旁边创建阴影？

这是一个截图，准确地描述了我在说什么。

在此处输入图像描述

这似乎与浏览器（IE、Firefox、Chrome）和平台（Windows、Mac、Linux）无关。

4

4 回答 4

8

它实际上是一系列五个极薄的 DIV，每个 DIV 的不透明度都在降低，彼此相邻堆叠。您可以通过使用 Firebug 并单击阴影区域来亲自查看。

于 2010-03-23T03:27:46.590 回答
2

IE 8：使用 F12，选择箭头控件，然后单击您感兴趣的元素。

在这种情况下，它有 5 个 div 重叠，宽度为 1-5px，所有样式均为“filter: alpha(opacity=x); opacity:0.x;”，x 从 10 变为 02

于 2010-03-23T03:30:15.350 回答
1

有 100% 可靠的技术可以在 IE 中获得 PNG 透明度，并且如果在有限的区域中使用不会使浏览器陷入困境。他们可以很容易地为此使用垂直重复的小型 PNG，但我猜他们使用 DIV 来跳过额外图像的使用。在谷歌地图网站上，这是一个值得优化的地方。在任何其他网站上，为此使用 5 个 div 并没有什么坏处，但如果您打算在覆盖层（用于边和角）上也使用 PNG“精灵”，它可能会更灵活。

于 2010-09-25T10:04:41.163 回答
1

可能是-webkit-box-shadow或-moz-box-shadow，具体取决于您的浏览器。

编辑我刚刚检查了页面，它是一系列<div>对齐的。在页面源代码中查找<div id="ds-v">（或在某种 DOM 检查器中，因为这样会更容易）。这很可能是他们为了获得很酷的效果而组合在一起的某种技巧，但我不知道这有多容易重现。

于 2010-03-23T03:16:01.857 回答