html - 三边渐变渐变

Question

我正在尝试制作一个 div，其中背景颜色在左侧、顶部和底部逐渐变淡。我希望 div 从 #FFF 从左到右均匀地淡化到 #CCC，并在顶部和底部淡化到 #FFF 30px 或 10%。

为此，似乎我需要对渐变进行分层。我试过了 radial gradients ，但它们似乎只提供圆圈和省略号，这不是我要找的。我正在寻找线性淡入淡出。

因此，我尝试使用 before 元素对渐变进行分层，但出于某种原因，顶部渐变似乎并未覆盖底部渐变。

JSfiddle

div::before {
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(204,204,204,0.5) 10%,rgba(204,204,204,0.5) 90%,rgba(255,255,255,1) 100%);
}

div {
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(204,204,204,1) 100%);
}

Answer 1

这是解决该问题的另一种方法。我不知道天气比渐变好，但至少你会知道这个选项。

http://jsfiddle.net/6os0epu6/1/

在这里，我使用了背景颜色，并用带偏移的框阴影(或“内发光”)将其包围。

box-shadow:         inset 50px 0 60px rgba(255,255,255,0.5);

这只是一个演示，所以我没有去追求你写的具体颜色和像素。

注意:IE8 将需要额外的 css 代码，但本例中没有。