Question

我正在尝试创建一个基本上是径向渐变的文本元素。我认为我可以通过采用圆形白色容器然后添加白色框阴影来做到这一点，但阴影的开头颜色和div的背景颜色在chrome中不匹配，而border-radius属性是在Firefox中造成奇怪的边框。

我喜欢一些输入，我为此创建了一个codepen，但这里是代码......

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覆盖它

Updated Pen

使用CSS与阴影进行背景混合的问题

1 个答案: