圓角通過CSS

Question

我寫了一個CSS爲foolows：

<style> 
#box_1 #box1_bg{ 
    width: 100px; 
    padding-left:0px; 
    font-family: "cachet Bold" , "CachetBoldRegular"; 
    font-weight: bold; 
    color: #FFFFFF; 
    text-decoration: none; 
    font-size: 21px; 
    text-align:center; 
    padding-top:10px; 
    height:30px; 
    border-bottom-style:groove; 
     -moz-border-radius-bottomleft: 10px; 
     -moz-border-radius-bottomright: 10px; 
     -webkit-border-bottom-left-radius: 10px; 
     -webkit-border-bottom-right-radius: 10px; 



} 
</style> 

這是給我的狀結構一個箱.. 我怎樣才能獲得圓角這個盒子？

Answer 1

如果您不使用支持CSS3的瀏覽器，則不會看到彎角。這包括所有版本的IE直到幷包括8.同時確保你有一個border-color定義，所以你可以實際看到邊框，或者background-color。

Answer 2

您需要添加背景或邊框才能看到圓角。

#box_1 #box1_bg{ 
    width: 100px; 
    padding-left:0px; 
    font-family: "cachet Bold" , "CachetBoldRegular"; 
    font-weight: bold; 
    color: #FFFFFF; 
    text-decoration: none; 
    font-size: 21px; 
    text-align:center; 
    padding-top:10px; 
    height:30px; 
    border:5px groove yellow; 
    -moz-border-radius-bottomleft: 10px; 
    -moz-border-radius-bottomright: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
} 

Answer 3

我使用border-radius:10px;，它適用於FF4，Chrome，Safari和Opera。

或者你可以爲不同的半徑做border-radius:10px 3px 7px 2px每個角落

，不要忘記background:#000;或東西給你的箱子一些外觀

Answer 4

使用以下樣式：

border-radius: 10px 10px; 
-moz-border-radius: 10px; 
-khtml-border-radius: 10px; 

來自http://www.handycss.com/tips/pure-css-rounded-corners/

Answer 5

在哪個瀏覽器中預覽該圖？

注意，標準CSS3邊框半徑屬性被稱爲border-radius

你申請你的規則只Mozilla和WebKit瀏覽器。

像這樣的跨瀏覽器選擇應該這樣做：

.round { 
-moz-border-radius-bottomleft:10px; 
-moz-border-radius-bottomleft:10px; 
-webkit-border-bottom-left-radius:10px; 
-khtml-border-bottom-right-radius: 10px; 
-khtml-border-bottom-left-radius: 10px; 
-webkit-border-bottom-right-radius:10px; 
-webkit-border-bottom-left-radius:10px; 
border-radius:0 0 10px 10px; 
/* optional behavior: url(border-radius.htc) */ 
} 

注：只有當你需要強制爲IE6-8支持宏達文件被使用。