border-radius在IE中创建一个大纲 [英] border-radius creates an outline in IE

问题描述

当border-radius应用于具有白色边框的彩色div时，背景颜色将出现在白色边框的外侧。为什么这会发生在ie？ （尝试ie9和ie10）。

When border-radius is applied to a coloured div that has a white border, the background color appears outside the white border in corners. Why is this happening in ie? (Tried ie9 and 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/

The thing here is that I really need the white border, so removing it or making it transparent, as some have proposed, is not an option. Here is a fiddle: http://jsfiddle.net/z0rt63e2/1/

推荐答案

如我在上面的评论（为了获得答案），使用 background-clip：

As in my comment above (in the interest of having an answer), use background-clip: content-box in your .rounded class.

以下是一些阅读材料：$ b $ b http://www.css3.info/preview/background-origin-and- background-clip /

Here's some reading material: http://www.css3.info/preview/background-origin-and-background-clip/

这篇关于border-radius在IE中创建一个大纲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！