CSS圆角桌角，渐变背景

Question

这是我的小提琴：

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

我想工作一些表格标题上的 CSS 魔法：

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

这一切是如何做到的？

<代码>

Answer 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)";
}

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

圆角：
在大多数现代浏览器中，圆角都被 border-radius 覆盖：

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

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

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