CSS圆角和渐变边框

我正在从设计师那里切割psd布局。该设计基于960网格系统，由多个框组成（一个960像素的框用于顶部菜单，两个460像素的框用于两个内容区域，一个220像素和一个720像素的框用于另一个内容设置选项等）。所有这些框都基于纯色背景色（主体），但它们都有圆角和10像素左右的边框，周围都是渐变色

我正在考虑在这里采用什么样的最佳方法，从html的角度考虑，同时记住它当然应该是有效的，良好的语义等等

有什么想法/意见吗

我正在考虑在这里采用什么样的最佳方法，从html的角度考虑，同时记住它当然应该是有效的，良好的语义等等

最好的方法是使用纯CSS3添加圆角和渐变

好处：

• 不需要额外的、语义上无意义的、蹩脚的标记
• 不需要图像
• 易于实现和维护
• 对于不支持CSS3的旧浏览器，能够优雅地降级

缺点：

• 还不能在所有浏览器中工作

这真的取决于你

，CSS3不是一个选项-您将不得不依赖难以维护的图像和臃肿的标记

然而，如果你不介意给旧浏览器的用户一个稍微不同但仍然很好的设计，CSS3肯定是一个不错的选择

---

“CSS3”梯度：

CSS3圆角：

---

我建议尝试javascript库DD_roundies（）。大多数浏览器已经支持CSS3中指定的圆角，DD_roundies还添加了对不支持圆角的浏览器（如IE）的支持。

这不会在所有IE6及以上版本的网络浏览器中完美运行，只支持CSS。您需要抓取JavaScript才能使其在所有浏览器中工作。有一些插件可以在运行中绕过角落，在所有WebBrowser上工作，而不需要任何额外的图像或CSS。我在这方面有很好的经验。

在这里，一张图片可能会有所帮助。另外，你还没有真正问过一个具体的问题。我不想粗鲁，但是，你可以在doctype.come上得到更快的答案。我在谷歌上找到的示例：。唯一的区别是我有圆角，因为他有波浪状的顶部和底部。但是渐变/阴影是相同的原理，我的需要在可变宽度。我想我确实问了一个问题，但我可以再试一次；如何最好地实现上述功能。它需要完全兼容IE+、7和8+FF、Chromse和Safari-因此CSS3恐怕不是一个选项：（我考虑过可能使用一些jQuery，但不确定负载效果（页面呈现时为方形，加载完成后为短圆形，然后为圆形）Firefox、Chrome和Safari将显示圆角，Opera和IE7,8将忽略这一规则并显示方形框。对于圆角之类的东西，我愿意进行权衡。不可能让你的网站在所有浏览器上都看起来像素完美。在嗅探IE并使用JavaScript提供e IE用户的圆角。可能是这个-