暗背景在CSS中溢出圆形按钮角

问题是，当我设置黑色按钮背景、白色、白色4px边框，然后

边框半径

设置5px时，黑色块会出现在按钮的角落。它发生在

和

元素中<代码>标签不会受到影响。
这正常吗？有人知道如何修复吗

HTML:

---

这是一种浏览器的bug，为了避免您需要使用背景剪辑，如下所示：

    #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;
    } 

这是描述和描述的

---

希望这会有所帮助

谢谢您的回答。
最近我发现了几乎相同的解决方案。我在

背景剪辑中使用了
填充框
，但是使用了
背景色
，而不是
背景
。原因使用
background
属性，它仅在
background片段
位于规则末尾时起作用。我想这是因为CSS规则内部的层叠。如果我使用
背景色
，它可以处理任意顺序的属性

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

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


如果您不知道这些属性的设置位置，则可能是从其他地方继承了样式（这是CSS中的主要问题之一）您使用的浏览器版本。在Chrome版本39.0.2171.95M上没有问题。不过，我在Mozilla 32.0.3和IE11上得到了这种效果。我猜这是浏览器呈现css边框半径的方式。如果是Firefox，我的浏览器35@St.AngerRoman-看到我的答案了吗
    #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;
    } 

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

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