我已经用了一段时间的CSS新的边界半径函数,但我今天难倒了!我有一个背景图像(120px60px),并已设置了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>
6条答案
按热度按时间0tdrvxhp1#
这可能是因为你的图片不够长,所以你看不到底部的圆角。实际上,我今天遇到了这个问题。
我只是简单地设置了一个背景色,它就告诉我问题出在哪里了。所以,只要修改你的CSS就可以了:
或:
那至少会告诉你你的图像是否覆盖了整个区域,你会知道从那里该怎么做。
qnakjoqk2#
在CSS3中是这样做的:
jk9hmnmh3#
最有可能的情况是底部被从溢出处截断。确保包含元素足够高以容纳这些元素的高度,或者将所有祖先的溢出设置为
overflow: visible
。另外,使用jsfiddle.net来发布实时示例,而不仅仅是真空中的CSS。CSS需要上下文。
chhkpiq44#
如前所述,您的图像不够大。您的div为120 x60 px,与您的图像匹配,但您有一个10 px的顶部填充,这将div的大小扩展到120 x70 px-太大而无法显示舍入。要么更改背景图像的大小,要么将div的大小调整为50 px高-使用填充,它将最终达到正确的大小。
bxjv4tth5#
您可以使用此代码
3qpi33ja6#
尝试使用margin-top而不是padding top,我最近遇到了这个问题,这似乎解决了它。