CSS圆角和渐变边框

Question

我正在从设计师切割和切片psd布局。该设计基于960网格系统，由多个框组成（顶部菜单为960px框，2个内容区为2 460px框，另一个内容设置选项为220像素和720像素等）。所有这些盒子都基于坚实的背景颜色（主体），但它们都有圆角和10像素的aprox边框，一直是渐变色。

我正在考虑什么是最好的路线，明智的，同时请记住，它应该是当然有效，语义等等。

任何想法/输入？

Answer 1

  

我正在考虑什么是最好的路线，明智的，同时请记住，它应该是当然有效，语义等等。

这里采取的最佳途径是使用纯CSS3添加圆角和渐变。

<强>优点：

• 不需要额外的，语义无意义的，糟糕的标记
• 无需图片
• 易于实施和维护
• 能够针对不支持CSS3的旧浏览器优雅地降级

<强>下行<击>取值：

• 在每个浏览器中都不起作用

这完全取决于你。

If you want your site to look exactly the same in every browser，CSS3不是一个选项 - 您将不得不依赖难以维护的图像和臃肿的标记。

但是，如果您不介意为旧浏览器的用户提供略有不同但仍然不错的设计，那么CSS3绝对是您的选择。

---

'CSS3'渐变：

• http://webkit.org/blog/175/introducing-css-gradients/
• https://developer.mozilla.org/en/CSS/-moz-linear-gradient
• https://developer.mozilla.org/en/CSS/-moz-radial-gradient

CSS3圆角：

• http://www.css3.info/preview/rounded-border/

Answer 2

在IE6的所有网络浏览器中以及仅使用 CSS的情况下，这无法完美运行。您需要获取JavaScript才能使其在所有浏览器中都能正常运行。有jQuery个插件可以动态地转角，可以处理所有的网页浏览器，而无需任何额外的图像或CSS。我对this jQuery Corner plugin有很好的体验。

Answer 3

我建议尝试使用javascript库DD_roundies（http://www.dillerdesign.com/experiment/DD_roundies/）。大多数浏览器已经支持CSS3中指定的圆角，而DD_roundies也增加了对不支持的浏览器（如IE）的支持。