css - CSS3 中的径向渐变

Question

我有一些在 CSS 中制作线性渐变的经验，但我真的很想制作类似于这张图片的径向渐变 http://i.stack.imgur.com/T85xO.png

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

Answer 1

你可以在这里玩这个工具。将在您生成所需内容时为您提供代码。 http://www.westciv.com/tools/radialgradients/index.html

http://gradients.glrzad.com/

Answer 2

径向渐变目前处于混乱状态，Safari 不支持椭圆径向背景（Webkit Nightly 支持，因此对 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;
}

http://jsfiddle.net/nmtHf/

Answer 3

24 种方式今年深入介绍了 Graidents，下面的文章：http: //24ways.org/2010/everything-you-wanted-to-know-about-gradients

在底部，他们花了一整节来讨论径向梯度，并给你两篇推荐阅读的文章：

MDN
Safari

我建议发布工具 robx，但如果你喜欢我，你喜欢额外阅读以了解事物的工作原理。