CSS圆角和渐变边框

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

我正在考虑在这里采取什么是最好的路线,明智的,同时要记住它应该是当然有效的,良好的语义等.

任何想法/输入？

1> Mathias Byne..：

---

我正在考虑在这里采取什么是最好的路线,明智的,同时要记住它应该是当然有效的,良好的语义等.

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

优点:

不需要额外的,语义无意义的,糟糕的标记

无需图像

易于实施和维护

能够为不支持CSS3的旧浏览器优雅地降级

下行s:

在所有浏览器中都不起作用

这完全取决于你.

如果您希望您的网站在每个浏览器中看起来完全相同,则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/

---

Firefox,Chrome和Safari将显示圆角,Opera和IE7,8将忽略该规则并显示方框.对于像圆角这样的东西,我愿意采取这种权衡.在所有浏览器上都不可能使您的网站看起来像素完美.