2

在 html 可以是液体的情况下，在 html 周围创建阴影的最佳做法是什么？

我曾经使用一张桌子并有 8 个 png 图像（4 个边和 4 个角）作为外部 8 个单元格中的每一个的背景，我希望在中间单元格中放置阴影。不是很语义化，但至少阴影图像是背景，而且是流动的...... html 很丑陋，乏味，可能对 SEO 不太友好。

现在有更兼容的方式（尽管我根本不记得有浏览器问题）还是有更语义化的方式来处理这个？

我不关心IE6。我使用 jquery，所以 javascript/jquery 机制，只要现代浏览器之间没有兼容性问题，我就可以了。

更新：使用 CSS3 的 box-shadow 的建议非常好。唯一的问题是它只做一个与它所应用的 html 元素大小相同的盒子阴影。所以这意味着我不能在周围有阴影（好像光源直接在头顶上）。我可以添加一个更大的周围 div。但是接下来会发生什么是边界半径导致白色伪影出现在角落......

有没有办法在 html 元素周围有一个漂亮的黑色阴影，而不仅仅是偏移它？

更新 2：CSS3 的 box-shadow 和 firefox/webkit 的实现都支持允许我想要的扩展值。不在下面的dynamicdrive.com链接中。谢谢大家！

4

2 回答 2

7

忽略 IE7/8 并使用box-shadow CSS3 规则。在这些旧版浏览器上，缺少阴影并不是世界末日。如果是，则相应收费。您还可以调查IE 的专有阴影过滤器，看看结果是否合理。

更多资源：这里

w3c工作草案定义：这里

于 2010-08-31T09:58:26.590 回答
1

你可以试试 jQuery Drop Shadow插件。

虽然它确实对性能有一点影响，并且在较慢的客户端机器上的多个元素上需要一段时间。对于我们公司的网站，我只使用了显然在 IE 中不起作用的 CSS3 路线，但任何有品味的人都使用 FF :)。很多像 IGN 这样的大型网站都采用类似的方法，如果客户端可以支持 CSS3 阴影，那么其他方面的硬奶酪就很棒。

于 2010-08-31T10:02:34.523 回答