Question

我在页面的固定正文容器上遇到了一些圆角问题。我提取了必要的代码元素并将它们放在JSFiddle中。见here。您会注意到页面的边框在内侧和外侧都有白线。关于删除它们的任何建议？这是我的HTML代码：

<html><body>
<div id="fixedbody">
    <header>
        <br>
        <br>Header stuff goes here</header>
    <div id="maincontent">Content stuff goes here</div>
    <footer>Footer stuff goes her</footer>
    <br>
    <br>
</div>
</body></html>

这是我的css代码：

body {
    background:transparent ;
    background-color: #0c0c0c;
    background:transparent ;
    min-width: 1200px;
}
#fixedbody {
    width: 980px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid;
    border-radius: 25px;
    overflow: hidden;
    clear: both;
    color: #000000;
    background-color: #ffffff;
    background-clip: border-box;
}
header {
    height: 515.25px;
    background-color:#0000ff;
    width: 980px;
    color: #ffffff;
    position: relative;
    background:transparent ;
}

Here is a picture of the top right corner.

Answer 1

您需要删除父div“fixedbody”的背景颜色：

background-color: #ffffff;

由于这会导致底部透明，以下是如何修复它以使背景颜色为白色：

<强> HTML

<div id="fixedbody">
    <header>
        <br/>
        <br/>Header stuff goes here
    </header>
    <div class="whitebg"> <!--Wrap the bottom part with a div tag having a class whitebg-->
        <div id="maincontent">Content stuff goes here</div>
        <footer>Fotter stuff goes her</footer>
    </div>
</div>

whitebg的CSS

.whitebg{
    background-color:white;
    padding:15px;
}

Live demo

Answer 2

对使用html的方式进行了一些小修复还删除了所有br标签

<强> http://jsfiddle.net/mAwv2/5/

body {
    background-color: #0c0c0c;
    min-width: 1200px;
}
#fixedbody {
    width: 980px;
    display: block; <-- not needed
    margin-left: auto;
    margin-right: auto;
    border: 3px solid;
    border-radius: 25px;
    overflow: hidden;
    clear: both; <-- not needed since you are not floating anything (float: xxx)
    color: #000000;
    background-clip: border-box;
}
#maincontent, footer { background-color:white; padding:20px; } 

header {
    padding:20px;
    height: 515.25px; <-- try use whole px
    background-color:#0000ff;
    width: 980px;  <-- Not needed, will push content outside of box when applied with padding
    color: #ffffff;
}

Answer 3

background-color: #ffffff;

删除它，你应该没事。

CSS圆角：白线

3 个答案: