Firefox边框半径渲染问题

Question

似乎Firefox （32, 35, 36）在渲染边框半径时会添加一个细微的灰色角落： 这里还有一个非常简单的测试：http://jsfiddle.net/imehesz/5ete1ctp/

.abox {
width:100px;
height:100px;
background-color: red;
border-left-color: rgb(0, 255, 87);
border-left-style: solid;
border-left-width: 10px;
border-right-color: rgb(0, 255, 87);
border-right-style: solid;
border-right-width: 10px;
border-bottom-color: rgb(0, 255, 87);
border-bottom-style: solid;
border-bottom-width: 10px;
border-top-color: rgb(0, 255, 87);
border-top-style: solid;
border-top-width: 10px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;    

-moz-box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;
-webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255),0 0 0 0 rgb(127, 127, 127) inset;
box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;
}

如果我移除background-color或box-shadow属性，那么它可以正常工作。但是在我的情况下，我需要它们。

有没有什么方法来解决这个问题？（我没有看到任何人在网上报告这个问题！？）

- user1916783

---

这是 box-shadow。要移除它吗？ - sebnukem

Answer 1

你所看到的是盒子阴影。如果你移除了阴影，那么“细小的灰色角落”也会消失。

Firefox（38.0.5）：

---

Chome (43.0.2357.81 m):

.abox {
    width:100px;
    height:100px;
    background-color: red;
    border: 10px solid rgb(0,255,87);
    border-radius: 20px;
}
.abox:first-child {
-moz-box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;
-webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255),0 0 0 0 rgb(127, 127, 127) inset;
box-shadow: 0 0 0 0 rgb(127, 127, 127),0 0 0 0 rgb(127, 127, 127) inset;  
  }

With shadow:
<div class="abox"></div>

Without shadow:
<div class="abox"></div>

- Robert McKee

---

移除 box-shadow 并没有帮助。我遇到了同样的问题，到目前为止解决方案是仅在 Firefox 中禁用边框。 - bstst