我在div标签上有左右底部半径边框的问题。
我正在使用一个主div,我希望左右底部有半径边框:
.main_div {
display:block;
margin: 0px auto;
width: 798px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
-moz-box-shadow: 0px 5px 30px 10px #000000;
-webkit-box-shadow: 0px 5px 30px 10px #000000;
-o-box-shadow: 0px 5px 30px 10px #000000;
box-shadow: 0px 5px 30px 10px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=180, Strength=30);
}
在jsfiddle上,会显示这些边框半径:此处为链接where it works
现在,在另一台服务器上,它们没有显示:此处链接[它不起作用] [2]
我无法找到它可能来自哪里,如果有人有想法......
由于
[2]:
答案 0 :(得分:1)
因为你里面有一张桌子,你需要隐藏溢出
.main_div {
overflow: hidden;
display: block;
margin: 0px auto;
width: 798px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
-moz-box-shadow: 0px 5px 30px 10px #000000;
-webkit-box-shadow: 0px 5px 30px 10px #000000;
-o-box-shadow: 0px 5px 30px 10px #000000;
box-shadow: 0px 5px 30px 10px #000000;
filter: progid: DXImageTransform.Microsoft.Shadow(color=#000000, Direction=180, Strength=30);
}
答案 1 :(得分:0)
它适用于这两个地方。但是有一个图像覆盖它,你说它不起作用。
您可以通过评论以下CSS来检查它。
td.bottom_page {
/* background-image: url(../images_template/header2_bg.jpg); */
}
为确保上述背景图片仅显示在.main_div
内部,允许显示底部边框半径,请将overflow: hidden;
添加到main_div
CSS。
答案 2 :(得分:0)
添加border-radius
此课程td.bottom_page
td.bottom_page {
background-image: url("../images_template/header2_bg.jpg");
background-position: center top;
border-radius: 0 0 30px 30px;
color: #ffffff;
height: 90px;
text-align: center;
vertical-align: middle;
}