html 投影最佳实践
在 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 链接中。谢谢大家！
What's the best practice for creating drop shadows around html where the html can be liquid?
I used to use a table and have 8 png images (4 sides and 4 corners) as backgrounds for each of the outer 8 cells with the html I want the drop shadow around in the middle cell. Not very semantic, but at least the drop shadow imagery were backgrounds and it was liquid... html was ugly, tedious and maybe not very SEO friendly.
Is there a more compatible (though I don't remember having browser issues at all) way now or is there a more semantic way of handling this?
I don't care about IE6. I use jquery, so a javascript/jquery mechanism, as long as there are no compatibility issues among modern browsers, is fine with me.
UPDATE: the suggestion to use CSS3's box-shadow was excellent. The only problem is it does a box shadow only the same size as the html element it's applied to. So this means that I can't have a drop shadow all around (as if a light source is directly overhead). I could add a surrounding div that's a little bigger. But then what happens is the border-radius causes white artifacts to appear at the corners...
Is there a way to have a nice black shadow all the way around an html element, not just offset from it?
UPDATE 2: CSS3's box-shadow and firefox/webkit's implementation all support a spread value that allows for what I want. Wasn't in that dynamicdrive.com link below.. Thanks guys!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
忽略 IE7/8 并使用 box-shadow CSS3 规则。对于这些旧版浏览器来说，缺少阴影并不是世界末日。如果是，则按相应费用收费。您还可以研究 IE 专有的 dropshadow 过滤器，并看看结果是否合理。
更多资源：此处
w3c 工作草案定义：此处
Ignore IE7/8 and use the box-shadow CSS3 rule. Lack of shadows isn't the end of the world on these legacy browsers. If it is, then charge for it accordingly. You could also investigate IE's proprietary dropshadow filters, and see if the result is reasonable.
More resource: here
w3c working draft definition: here
您可以尝试 jQuery Drop Shadow 插件。
不过，它确实对性能造成了一些影响，并且在速度较慢的客户端计算机上处理多个元素会花费一些时间。对于我们公司的网站，我只使用了 CSS3 路线，这显然在 IE 中不起作用，但任何有品味的人都可以使用 FF :)。许多大型网站（例如 IGN）都采取类似的方法，如果客户端可以支持 CSS3 阴影，那么就很好了，否则很难。
You could try the plugin for jQuery Drop Shadow.
It does have a bit of a performance hit though and takes an age on multiple elements on slower client machines. For our company site I just used the CSS3 route which obviously didn't work in IE but anyone with any taste uses FF anyway :). Lots of big sites such IGN take the similar approach that if the client can support CSS3 shadows then great otherwise tough cheese.