css - CSS3中的径向渐变

Closed. This question needs to be more focused。它当前不接受答案。












想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。

2年前关闭。



Improve this question





我有一些在CSS中制作线性渐变的经验，但我真的想制作一个与此图像类似的径向渐变
http://i.stack.imgur.com/T85xO.png

基本上是浅灰色的放射状元素，位于元素的底部

最佳答案

径向渐变目前在实现中一团糟，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/