纯css渐变答案

【问题标题】：Pure css gradient纯css渐变
【发布时间】：2019-11-14 18:40:33
【问题描述】：

有谁知道我如何使用纯 CSS 绘制如下图所示的渐变。

它不必在 IE 中工作。我可以让它工作，但我似乎无法像图像显示的那样逐渐减少左右两侧的渐变。任何想法将不胜感激。同样，这是使用直接 css 来执行此操作。

【问题讨论】：

标签： html css yui-pure-css

【解决方案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 );

【讨论】：

感谢 Rick，但正如我在帖子中所说的那样，我能够实现渐变，但我无法做到的是两边都有，左侧和右侧逐渐变细。

【解决方案2】：

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

Examples

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

这里是例子 --> enter link description here

【讨论】：