CSS圓角表角​​落，漸變背景

Question

這裏是我的小提琴：

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

我要努力在表頭的一些CSS魔法：

• 在左上和右上
圓角
• 漸變色背景
• 漸變邊框
• Cro ss瀏覽器兼容性

這一切怎麼辦？

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:5px 5px 0px 0px; 

對於舊版本的Internet Explorer，你會很遺憾不得不做更多的hackerly的事情，可能真的不值得花時間和精力。 http://webdesign.about.com/od/css/a/aa072406.htm是我發現很快掃描網頁的一個例子。

對於更多的東西，MDC在解釋瀏覽器功能及其兼容性以及其他瀏覽器的替代方案方面的經驗相當不錯。