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

Question

我正在尝试使用基本上是径向渐变的文本制作元素。我想我可以通过取一个圆形的白色容器然后添加一个白框阴影来做到这一点，但是阴影开始的颜色和 div 的背景颜色在 chrome 中不匹配，并且边框半径属性是在 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;
}

有问题的边框有背景的颜色，所以现在box-shadow覆盖它

更新的笔