border-radius在IE中创建轮廓

Question

当border-radius应用于具有白色边框的彩色div时,背景颜色将显示在角落的白色边框外部.为什么会发生这种情况？(试过ie9和ie10).

<div class="rounded"></div>

.rounded {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #f00;
    width: 100px;
    height: 100px;
}

body {
    background-color: #fff;
}

这里的事情是我真的需要白色边框,所以删除它或使其透明,正如一些人提出的那样,不是一种选择.这是一个小提琴:http://jsfiddle.net/z0rt63e2/1/

Answer 1

正如我上面的评论(为了得到答案),background-clip: content-box在你的.rounded课堂上使用.

这里有一些阅读材料:http: //www.css3.info/preview/background-origin-and-background-clip/