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

我一直在使用新的CSS边界半径函数一段时间，但我今天难住！我有一个背景图片（120px x 60px），并设置了5px的边框半径，但它只是将顶部两个角落四舍五入？！边界半径只是围绕我的divs顶部？

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

来源

2012-04-11 Zulu Irminger

看看在Firebug或Chrome的检查器中应用的样式。没有HTML，我们不能做很多事情，最好是链接到问题的现场演示。 – Bojangles 2012-04-11 16:36:00

你可以在这里发布你的HTML样本吗？ – 2012-04-11 16:38:36

完成！很抱歉，如果您的网站受密码保护，您将无法访问该网站...除非您是黑客：P – 2012-04-11 16:39:55

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

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

来源

2012-04-11 16:35:31 kmiyashiro

感谢您的评论@kmiyashiro - 我已经使#buttonRow风格高得多，仍然没有改变......并感谢您对jsfiddle的建议:) – 2012-04-11 16:36:57

这可能是因为您的图片不够长，因此您在底部看不到圆角。实际上，我今天遇到了这个问题。

我只是设置背景颜色，它向我展示了问题所在。所以，只要修改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');

至少会告诉你，如果你的图像覆盖整个区域或不是，你就会知道什么从那里做。

来源

2012-04-11 18:36:27

在CSS3，它的完成这样的：

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

来源

2013-02-28 19:17:54 Buzzwilder

正如前面回答，你的形象是不是足够大。您的div为120x60px，以符合您的图片，但您有一个10px的填充顶部，它将div的大小扩展到120x70px - 太大而不能显示舍入。要么改变背景图片的大小，要么将div的大小调整为50px高 - 使用填充符时，它会以适当的大小结束。

来源

2014-07-31 03:13:14

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

回答

相关问题