纯css渐变

Question

任何人都知道如何用纯CSS做这样的渐变。它不必在IE中工作。 我可以让它工作，但我似乎无法像图像所示左右两侧逐渐减小渐变。 任何想法都会感激不尽。再次，这是使用直接css来做到这一点。

Answer 1

这个网站对于CSS渐变非常棒：

http://www.colorzilla.com/gradient-editor/

您甚至可以导入图像或CSS。

一个例子是：

background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

Answer 2

为什么你需要渐变？阴影怎么样。

Examples

Answer 3

这是一项非常复杂的任务。他们将一个div放在前面一个div后面。背后的是他们创造阴影的地方，然后他们改变它并定位它以实现这种效果。以下是执行此技术的指南指南（将其放在一个角落，但您可以调整一下并获得该效果）...我确信有特定的指南可以实现您想要的确切效果，但他们似乎正在逃避我当天的搜索技巧。

http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow

Answer 4

使用纯CSS ，您可以使用径向渐变。

假设你有一个div模仿那个阴影，并且它有300px的宽度和100px的高度，那么，你可以通过以下方式实现效果：

background: radial-gradient(70% 10%,gray 20%, white 60%);
background-position: 0px -54px;
background-size: 100% 110%;

以下是示例 - ＆gt; enter link description here