Question

问题是当我设置黑色按钮背景，白色，白色4px边框然后border-radius说5px时，黑色部分出现在按钮的角落。它出现在<input>和<button>元素中。 <div>代码不会受到影响这是正常的，有人知道如何修复它吗？

CodePen

HTML：

<div id=a>
    <div id=b>Button</div>
    <br>
    <input id="but1" type="button" value="Button" />
    <button id="but2">Button</button>
</div>

CSS：

div#a {
    background:rgb(255, 250, 204);
    width:200px;
    height:120px;
    padding:10px;
}
div#b {
    border: 4px solid white;
    padding: 5px;
    background: black;
    width: 70px;
    color:white;
    border-radius: 5px;
    text-align:center;
}
#but1 {
    border: 4px solid yellow;
    padding: 5px;
    background: black;
    width: 70px;
    color:white;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align:center;
}
#but2 {
    border: 4px solid white;
    padding: 5px;
    background: black;
    width: 70px;
    color:white;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align:center;
}

Answer 1

感谢您的回答robjez 最近我发现了几乎相同的解决方案。我将padding-box用于background-clip，但使用background-color代替background。 background属性的原因仅在background-clip位于规则末尾时才有效。我想这是因为内部CSS规则的级联。如果我使用background-color，它适用于任何属性顺序。

#but1 {    
    padding: 5px;
    width: 70px;
    border-radius: 5px; 

    color:white;
    background-clip:padding-box;
    background-color: black;
    border: 4px solid yellow;
}

CodePen

Answer 2

这是一种浏览器的错误，以避免您需要使用background-clip，如下所示：

    #but1 {
       padding: 5px;
       width: 70px;
       background: black;
       color:white;
       border: 5px solid yellow; 
       border-radius: 5px;

       /* Prevent background color leak outs */
       -webkit-background-clip: padding-box; 
       -moz-background-clip:    padding; 
       background-clip:padding-box;
    }

这是here和here

所描述的

希望这会有所帮助

深色背景溢出CSS中的圆角按钮角

2 个答案: