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/

Answer 2

根据这篇文章...... Removing the image border in Chrome/IE9

试，

 border-style:none;

这可能有帮助吗？

UPDATE :: 我找到了这个链接.. http://css-tricks.com/removing-the-dotted-outline/

并根据它（从底部向下）我们必须添加元标记..

<meta http-equiv="X-UA-Compatible" content="IE=9" />

IE = edge应该可以工作并使用最新的渲染引擎..

border-radius在IE中创建轮廓

2 个答案: