css - 深色背景溢出 CSS 中的圆 Angular 按钮

Question

问题是当我设置黑色按钮背景、白色、白色 4px 边框然后 border-radius 时说 5px 黑色部分出现在按钮的 Angular 落。它发生在 <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 .
最近我发现了几乎相同的解决方案。我为 background-clip 使用了 padding-box 但使用了 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