firefox - 背景与阴影与 CSS 混合的问题

Question

我正在尝试使用基本上是径向渐变的文本制作元素。我想我可以通过拿一个圆形的白色容器然后添加一个白色的盒子阴影来做到这一点，但是阴影开始的颜色和 div 的背景颜色在 chrome 中不匹配，并且 border-radius 属性是在 Firefox 中导致奇怪的边框。

我想要一些输入，我为此创建了一个代码笔，但这是代码...

http://codepen.io/syren/pen/tcdBz

div.feature{
  background:#000;
  width:100%;
  height: 300px;
}

div.text{
  width: 300px;
  height: 300px;
  background: white;
  padding: 130px 0 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 160px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 0 50px 50px #fff;
  margin: 0 auto;
}

谢谢!

Answer 1

这是一个修复/解决方法:

div.text{
  width: 300px;
  height: 170px;
  background: white;
  padding: 130px 0 0;

  border:solid 1px white;
  border-radius: 50%;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 0 10px #fff,0 0 20px #fff,0 0 50px 30px #fff,0 0 50px 40px #fff;
  margin: 0 auto;
}

buggy 边框具有背景颜色，所以现在 box-shadow 覆盖了它

Updated Pen