CSS圆角和渐变边框答案

【问题标题】：CSS rounded corners and gradient borderCSS圆角和渐变边框
【发布时间】：2010-01-17 13:12:01
【问题描述】：

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

我正在考虑在这里采取的最佳路线，明智的 html，同时记住它当然应该验证，良好的语义等。

有什么想法/意见吗？

【问题讨论】：

一张图片在这里可能会有所帮助。此外，您还没有真正提出具体问题。
我不想变得粗鲁，但是您可以在 doctype.com 上得到更快的答复
我在 Google 上找到的示例：ruzee.com/blog/2006/06/…。唯一的区别是我有圆角，因为他有波浪状的顶部和底部。但是渐变/阴影是相同的原则，我的需要是可变宽度的。我想我确实问了一个问题，但我可以再试一次；如何最好地实现上述功能。

标签： css gradient

【解决方案1】：

我正在考虑在这里采取的最佳路线，明智的 html，同时记住它当然应该验证，良好的语义等。

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

好处：

不需要额外的、语义上毫无意义的蹩脚标记
无需图片
易于实施和维护
能够为不支持 CSS3 的旧浏览器正常降级

缺点s：

目前还不能在所有浏览器中使用

这完全取决于你。

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

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

‘CSS3’渐变：

CSS3 圆角：

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

【讨论】：

它需要完全兼容 IE+、7 和 8 + FF、Chromse 和 Safari - 所以我担心 CSS3 不是一个选项 :( 我想可能使用一些 jQuery，但不确定加载效果（页面渲染时的方角，然后加载完成时短的falsh，然后角是圆的）
Firefox、Chrome 和 Safari 将显示圆角，Opera 和 IE7,8 将忽略该规则并显示方框。对于圆角之类的东西，我愿意进行权衡。让您的网站在所有浏览器上都看起来完美像素是不可能的。
我会采用这种方法，同时嗅探 IE 并使用 JavaScript 为 IE 用户提供圆角。也许这个 - methvin.com/jquery/jq-corner-demo.html

【解决方案2】：

这不会在 IE6 及以上的所有网络浏览器中完美运行，只有 CSS。您需要获取 JavaScript 才能使其在所有浏览器中工作。有jQuery 插件可以即时转角，适用于所有网络浏览器，无需任何额外的图像或 CSS。我对this jQuery Corner plugin 有很好的体验。

【讨论】：

【解决方案3】：

我建议尝试 JavaScript 库 DD_roundies (http://www.dillerdesign.com/experiment/DD_roundies/)。大多数浏览器已经支持 CSS3 中指定的圆角，并且 DD_roundies 也添加了对不支持圆角的浏览器（如 IE）的支持。

【讨论】：