圆角通过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支持宏达文件被使用。