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

Question

我已经使用新的 CSS border-radius 函数有一段时间了，但今天我被难住了!我有一张背景图片 (120px x 60px) 并设置了 5px 的边框半径，但它只是将顶部的两个 Angular 圆化了？!

我使用的 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;
}

输出是这样的:

为什么它只显示顶 Angular 是圆的？!

如有任何帮助，我们将不胜感激!

谢谢，祖鲁

编辑

这里是那些提问的 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

可能是您的图片不够长，因此您看不到底部的圆 Angular 。事实上，我今天遇到了。

我只是设置了背景颜色，它告诉我问题出在哪里。因此，只需将您的 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');

这至少会告诉您您的图像是否覆盖了整个区域，并且您会从那里知道该怎么做。