Question

在下面的示例中：

我将内阴影设置为容器，将10px边框设置为border-radius设置为50％。结果是在容器边界外面建立了薄薄的白色边框。

薄白色边框显示在：

mozilla firefox
ie 11

并且在以下内容中不可见：

opera
safari
chrome

欢迎任何解决此问题的建议。

Answer 1

这是因为渲染边框的方式：在div上绘制。这是另一个“半像素”问题，边框颜色与div背景颜色混合......看看Border-radius: 50% not producing perfect circles in Chrome或IE11 draws small line between positioned elements。这些不是同一个问题，但起源相同。

可能你更简单的解决方法是跳过div的边框宽度，并使用新包装div的背景设置一个“假”边框：

在你的HTML中：

<div class="fakeborder"><div class="sub">Hm</div></div>

并在你的CSS中：

.sub {
    ...
    border: 0px solid black;
    ... 
}

.fakeborder{
    margin:0;
    padding:10px;     /*The fake border width*/
    background:black; /*The fake border color*/
}

Answer 2

我有类似的问题。即使我设置

box-shadow:0 0 0 rgba(0,0,0,0);

只是因为我不想要该元素的盒子阴影而且我认为我可以像这样覆盖属性。

这在webkit浏览器中运行，但FF仍然呈现出一层薄薄的阴影。

更好的解决方案和将css属性覆盖为默认属性的最佳做法，显然将其设置为默认值（哑！）

box-shadow: none

Firefox无法正确渲染：border-radius，box-shadow和border

2 个答案: