CSS 圆角桌角，渐变背景答案

【问题标题】：CSS Rounded Table Corners, Gradient BackgroundCSS 圆角桌角，渐变背景
【发布时间】：2011-08-23 19:27:01
【问题描述】：

这是我的小提琴：

http://jsfiddle.net/6yU6N/10/

我想在表格标题上使用一些 CSS 魔法：

左上角和右上角的圆角
渐变色背景
渐变边框
跨浏览器兼容性

这一切是怎么做到的？

【问题讨论】：

你可以找到解决方案here

标签： css background css-tables rounded-corners

【解决方案1】：

渐变：大多数现代浏览器都使用 CSS3 实现了这些，但对于 Internet Explorer，您必须使用特殊的过滤器。由于 CSS3 是一个新兴标准，因此您必须使用浏览器特定的前缀。

.gradient{
    background: -moz-linear-gradient(top, #fff, #eee);
    background: -webkit-linear-gradient(top, #fff, #eee);
    background: -o-linear-gradient(top, #fff,#eee);
    background: linear-gradient(top, #fff, #eee);
    /* versions of IE use these */
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff',EndColorStr='#eeeeee');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eeeeee)";
}

可能还有第三种方法请记住，您始终可以在背景上使用带有 repeat-x 的图像。

圆角：在大多数现代浏览器中，圆角都被边框半径覆盖：

border-radius:5px 5px 0px 0px;

对于旧版本的 Internet Explorer，很遗憾，您将不得不做更多可能不值得花费时间和精力的黑客行为。 http://webdesign.about.com/od/css/a/aa072406.htm 是一个我发现扫描网页速度非常快的例子。

要了解更多内容，根据我的经验，MDC 通常会很好地解释浏览器功能及其对其他浏览器的兼容性和替代方案。

【讨论】：

我很确定 CSS3 PIE 可以让 IE 完成几乎所有 CSS3 的工作。我认为他们仍在研究 IE9 和背景渐变（无论如何，我最后一次听说）。