CSS圆角和渐变边框

Question

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

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

任何想法/输入？

Answer 1

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

在这里采取的最佳途径是使用纯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/