CSS3中的径向梯度

我有一些在CSS中制作线性渐变的经验，但我真的很想制作一个类似于此图像的径向渐变

---

基本上是位于元素底部的浅灰色径向线

您可以在此处使用此工具。将在生成所需内容时为您提供代码。

---

24种方式今年通过以下文章深入介绍了Graidents：

在底部，他们花了一整段时间在径向凹痕和凹痕上 给你两篇建议阅读的文章：

---

我会建议使用robx发布的工具，但如果你喜欢我，你会喜欢额外的阅读来理解事物是如何工作的

目前，径向渐变的实现一团糟，Safari不支持椭圆径向背景（Webkit每晚都支持，所以Safari的支持很快就会到来）。Chrome有这么多版本，我不确定，IE9也不支持

所以我想说，你最好的选择是通过嵌入框阴影进行伪装：

.shadow {
  height: 80px;
  box-shadow: inset 0 75px 75px #fff, 
              inset 0 50px 50px #fff,
              inset 0 20px 20px #fff,
              inset 0 5px 5px #fff;

  background: #ccc;
}

---

+1用于该工具。尽管需要注意的是，它使用了Webkit的旧语法，但后来修改为更符合W3C标准建议-。虽然使用旧格式来支持过去的两个版本仍然是一个好主意，但是新格式应该允许从Gecko代码更容易地进行转换。我一直在使用这两种工具来学习CSS3渐变，它们都非常有用。@rotox-自从我们共享工具以来，你看过Colorzilla（）中的工具吗？它还没有做放射状的，但它对于线性的非常棒，特别是对于那些最熟悉Photoshop的人。我也经历过这些。好东西，但如果你的学习时间很短，那么代码，没有什么比工具和生成器更适合边走边教；）