0

Does anyone know how I could plot a gradient like in the image below with pure CSS.

It doesn't have to work in IE. I can get it to work but I can't seem to be able to taper off the gradient on both sides left and right like the image shows. Any ideas would be grateful. Again this is using straight css to do this.

Gradient example

4

4 回答 4

4

这个网站非常适合做 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 );
于 2012-10-08T16:01:28.587 回答
2

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

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

于 2012-10-08T21:03:01.223 回答
2

为什么需要渐变？阴影效果如何。

例子

于 2012-10-08T16:23:33.613 回答
0

使用纯 CSS，您可以使用radial-gradient。

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

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

这是示例 -->在此处输入链接描述

于 2015-11-20T21:28:00.167 回答