Question

我写了一篇CSS如下：

<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

您需要添加背景或边框才能看到圆角。

#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 2

如果您没有使用支持CSS3的浏览器，则不会看到弯角。这包括所有版本的IE，包括8.还要确保定义了border-color，以便您可以实际查看边框，或者background-color。

Answer 3

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

或者，您可以针对每个角落的不同半径执行border-radius:10px 3px 7px 2px

并且不要忘记background:#000;或其他什么来给你的盒子一些外观

Answer 4

您在哪个浏览器中进行预览？

请注意，标准css3边框半径属性称为border-radius

您只是将规则应用于mozilla和webkit浏览器。

像这样的crossbrowser选择器应该这样做：

.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时才使用.htc文件。

Answer 5

使用以下样式：

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

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

圆角通过CSS

5 个答案: