CSS圆角表角​​落，渐变背景 [英] CSS Rounded Table Corners, Gradient Background

问题描述

下面是我的小提琴：

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

我要工作表头的一些CSS魔法：

I want to work some CSS magic on the table header:

• 在左上和右上圆角


• 渐变色背景


• 渐变边框


• 跨浏览器的兼容性

这怎么都是可以做的！？

How can this all be done!?

推荐答案

渐变：
大多数现代浏览器已经实现了这些使用CSS3，但适用于Internet Explorer，你将不得不使用特殊的过滤器。由于CSS3是一个新兴的标准，你必须使用特定浏览器prefixes。

Gradients: Most modern browsers have implemented these using CSS3 but for Internet Explorer you'll have to use special filters. Since CSS3 is an emerging standard, you have to use browser specific prefixes.

.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。

there may be a third approach keep in mind that you could always use an image with a repeat-x on the background.

圆角：
圆角由边界半径覆盖你的大部分现代浏览器：

Rounded Corners: Rounded corners are covered by border-radius in most of your modern browsers:

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

对于旧版本的Internet Explorer，你会很遗憾不得不做更多的hackerly的事情，可能是不值得的时间和精力真的。 http://webdesign.about.com/od/css/a/aa072406.htm 是我发现真的很快扫描网络的例子。

For older versions of Internet Explorer, you'll unfortunately have to do more hackerly things that are probably not worth the time and effort really. http://webdesign.about.com/od/css/a/aa072406.htm is an example I found scanning the web really quickly.

有关更多的东西，民革通常是pretty好在我对解释其他浏览器浏览器的功能和他们的兼容性和替代品的经验。

For more stuff, the MDC is usually pretty good in my experience about explaining browser features and their compatibility and alternatives for the other browsers.

这篇关于CSS圆角表角​​落，渐变背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！