我在页面上使用下面的代码作为页脚。它的问题在于,如果您运行代码片段,您将能够在边框的底角处有小的白色新月。
上述问题是由行background-clip: padding-box;
引起的。我无法删除此行,因为需要创建透明边框。
footer.mycontainer.bottom {
height: 50px;
background-color: rgba(143, 90, 5, 0.88);
border: 1.5mm;
border-color: rgba(143, 90, 5, 0.88);
border-style: solid;
border-top-style: none;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
-webkit-border-bottom-right-radius: 4mm;
-moz-border-radius-bottomright: 4mm;
border-bottom-right-radius: 4mm;
background-clip: padding-box;
}
.ftext.bottom {
margin: 0;
padding: 1px 15px;
height: 100%;
}
.mycontainer {
display: block;
width: 80%;
margin: 0 10%;
}
<footer class="mycontainer bottom">
<p class="ftext bottom">
Footer text from PHP
</p>
</footer>
为了解决问题,我尝试使用background-clip: content-box;
和background-clip: border-box;
等代码替换该行。这些尝试没有解决问题
答案 0 :(得分:3)
background-clip
以摆脱cresent border: 0
,这样就有一个0px宽的边框,没有显示任何内容
footer.mycontainer.bottom {
height: 50px;
background-color: rgba(143, 90, 5, 0.88);
border: 0;
border-color: rgba(143, 90, 5, 0.88);
border-style: solid;
border-top-style: none;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
-webkit-border-bottom-right-radius: 4mm;
-moz-border-radius-bottomright: 4mm;
border-bottom-right-radius: 4mm;
}
.ftext.bottom {
margin: 0;
padding: 1px 15px;
height: 100%;
}
.mycontainer {
display: block;
width: 80%;
margin: 0 10%;
}
&#13;
<footer class="mycontainer bottom">
<p class="ftext bottom">
Footer text from PHP
</p>
</footer>
&#13;