html - 边界半径仅围绕我的 div 顶部？

Question

我一直在使用新的 CSS 边框半径函数有一段时间了，但我今天难住了！我有一个背景图片 (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;
}

输出是这样的：

为什么它只将顶角显示为圆形？！

任何帮助将不胜感激！

谢谢，祖鲁语

编辑

这是为那些询问的人提供的 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

在 CSS3 中是这样完成的：

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

Answer 3

如前所述，您的图像不够大。您的 div 为 120x60px 以匹配您的图像，但您的 padding-top 为 10px，这会将 div 的大小扩展到总共 120x70px - 太大而无法显示四舍五入。要么更改背景图像的大小，要么将 div 的大小调整为 50px 高——使用填充，它最终会以适当的大小结束。

Answer 4

底部很可能会从溢出中被切断。确保包含元素足够高以容纳这些元素的高度，或者将所有祖先的溢出设置为overflow: visible.

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

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>