css - border-radius 在 IE 中创建轮廓

Question

当 border-radius 应用于具有白色边框的彩色 div 时，背景颜色会出现在 Angular 落的白色边框之外。为什么在 ie 中会出现这种情况？ (试过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;
}

这里的问题是我真的需要白色边框，所以像某些人建议的那样将其移除或使其透明不是一种选择。 这是一个 fiddle :http://jsfiddle.net/z0rt63e2/1/

Answer 1

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

这是一些阅读 Material : http://www.css3.info/preview/background-origin-and-background-clip/