径向渐变 [英] radial gradients in CSS3

问题描述

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

I have some experience making linear gradients in CSS but I would really like to make a radial gradient similar to this image http://i.stack.imgur.com/T85xO.png

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

Basically a light grey radial positioned at the bottom of the element

推荐答案

径向渐变现在在一个实现混乱，Safari不支持椭圆径向背景，所以支持Safari即将推出）。 Chrome有这么多版本，我不知道它，IE9不支持它们。

Radial gradients are in an implementation mess right now, Safari doesn't support elliptical radial backgrounds (Webkit Nightly does, so support for Safari is coming soon). Chrome has so many versions I'm not sure about it, and IE9 doesn't support them.

所以我想说你最好的选择是通过inset盒阴影：

So I'd say your best option is faking it through inset box shadows:

.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/

这篇关于径向渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！