Question

我一直在使用新的CSS border-radius函数，但今天我很难过！我有一个背景图像（120px x 60px），并设置了5px的边框半径，但它只围绕前两个角落？！

我正在使用的CSS代码在这里：

#buttonRow {
    position:relative;
    width:980px;
    height:60px;
    margin-left:51px;
    margin-bottom:25px;
    float:left;
}

#button {
    position:relative;
    float:left;
    width:120px;
    height:60px;
    margin-left:25px;
    padding-top:10px;
    border-radius:5px;
    background-image:url('../assets/buttons/generic_button.png');
    background-repeat:no-repeat;
}

#singleLineButton {
    position:relative;
    float:left;
    width:120px;
    height:60px;
    margin-left:25px;
    padding-top:20px;
    border-radius:5px;
    background-image:url('../assets/buttons/generic_button.png');
    background-repeat:no-repeat;
}

#buttonText {
    width:120px;
    height:auto;
    color:#FFFFFF;
    text-align:center;
    font-size:16px;
    font-family: Adobe Kaiti Std R;
}

输出是这样的：

Rounded Divs

为什么只将圆角显示为圆角？！

非常感谢任何帮助！

谢谢，祖鲁

修改

以下是那些要求的HTML：

<div id="buttonRow">
    <a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
        <div id="button"><div id="buttonText">Individual Table Management</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
        <div id="singleLineButton"><div id="buttonText">Attendance</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
        <div id="singleLineButton"><div id="buttonText">School Members</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
        <div id="singleLineButton"><div id="buttonText">Search</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
        <div id="singleLineButton"><div id="buttonText">School Details</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
        <div id="singleLineButton"><div id="buttonText">Users</div></div>
    </a>
</div>

Answer 1

可能是您的图像不够长，因此您无法看到底部的圆角。实际上，我今天碰到了那个。

我只是设置了背景颜色，它向我展示了问题所在。所以，只需将CSS修改为：

background-image: #00ff00 url('../assets/buttons/generic_button.png');

或：

background-color: #00ff00; /* bright green for contrast */
background-image: url('../assets/buttons/generic_button.png');

至少会告诉你你的图像是否覆盖了整个区域，你会知道该怎么做。

Answer 2

最有可能的是底部因溢出而被切断。确保包含元素足够高以容纳这些元素的高度或将所有祖先的溢出设置为overflow: visible。

另外，使用jsfiddle.net在真空中发布实例而不仅仅是CSS。 CSS需要上下文。

Answer 3

在CSS3中它是这样做的：

border-top-right-radius: 8px;
border-top-left-radius: 8px

Answer 4

如前所述，您的图片不够大。你的div是120x60px来匹配你的图像，但你有一个10px的填充顶部，它将div的大小扩展到120x70px总计 - 太大而不能显示舍入。要么改变背景图像的大小，要么将div的大小调整为50px高 - 使用填充，它将以适当的大小结束。

Answer 5

您可以使用此代码

#buttonRow {
    width: 1170px;
    margin: 0 auto;
    display: block;
}
#button {
    position:relative;
    float:left;
    width:120px;
    height:60px;
    margin-left:25px;
    padding-top:10px;
    border-radius: 5px;
    background-image:url('../assets/buttons/generic_button.png');
    background-repeat:no-repeat;
    background: red;
}
#singleLineButton {
    position:relative;
    float:left;
    width:120px;
    height:60px;
    margin-left:25px;
    padding-top:20px;
    border-radius: 5px;
    background-image:url('../assets/buttons/generic_button.png');
    background-repeat:no-repeat;
    background: red;
}
#buttonText {
    width:120px;
    height:auto;
    color:#FFFFFF;
    text-align:center;
    font-size:16px;
    font-family: Adobe Kaiti Std R;
}

<div id="buttonRow">
    <a href="http://www.zuluirminger.com/SchoolAdmin/individual_table_management.php">
        <div id="button"><div id="buttonText">Individual Table Management</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/attendance_index.php">
        <div id="singleLineButton"><div id="buttonText">Attendance</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/school_members.php">
        <div id="singleLineButton"><div id="buttonText">School Members</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/search_choice.php">
        <div id="singleLineButton"><div id="buttonText">Search</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/school_details.php">
        <div id="singleLineButton"><div id="buttonText">School Details</div></div>
    </a>
    <a href="http://www.zuluirminger.com/SchoolAdmin/user_management.php">
        <div id="singleLineButton"><div id="buttonText">Users</div></div>
    </a>
</div>

边界半径只围绕我的div的顶部？

5 个答案: