CSS Rounded Table Corners, Gradient Background

问题:

Here's me fiddle:

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

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

• Rounded corners in upper left and upper right
• Gradient color background
• Gradient border
• Cross-browser compatibility

How can this all be done?

回答1:

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

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;

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.

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.