Question

我有一个半径为50％且高度和宽度相等的div。它的边框颜色与父元素的背景颜色相同。在这个边界之外，有一个div背景颜色的薄轮廓，看起来有点像抗锯齿。

为什么会这样？它似乎出现在所有版本的IE中。

CodePen：http://codepen.io/anon/pen/LVMwxR

<body>
    <div id="inner"></div>  
</body>

和CSS：

#inner {
    border-radius: 50%;
    border: 40px solid white;
    background: red;
    width: 20rem;
    height: 20rem;
    margin: 0 auto;
}

body {
    background: white;
}

Answer 1

我无法使用border提供即时解决方案，但另一种方法是改为使用box-shadow。

* {
  box-sizing: border-box;
}

#inner {
  border-radius: 50%;
  box-shadow: 0 0 0 40px white;
  background: red;
  width: 20rem;
  height: 20rem;
  margin: 40px auto;
}

body {
  background: lightblue;
}

 <div id="inner"></div>

注意：框阴影不会为元素添加尺寸，因此它不是绝对的替代品。

为什么我在Internet Explorer中的css圈周围有一个微弱的边框？

1 个答案: