带有线性渐变的边框阴影与带有线性渐变的背景图像组合？答案

【问题标题】：border-shadow with linear-gradient combinate with background-image with linear-gradient?带有线性渐变的边框阴影与带有线性渐变的背景图像组合？
【发布时间】：2014-10-01 12:25:15
【问题描述】：

我想制作一个带有渐变的 div：白色到透明。我在上面添加了一个红色的弓形阴影，但我需要 box-shadow 效果尊重与 box her-self 相同的透明度渐变！

就像我们看到的 http://jsfiddle.net/by57bkgy/ 一样，这里不好，我不希望 div 左侧出现红色效果。

我试过box-shadow(0px 0px 2px 1px linear-gradient(90deg, rgba(0,0,0,0) 0, red 10%, red 100%));，但没有用。

如何在 box-shodow 上将线性渐变红色变为透明？

谢谢。

编辑我尝试使用 -webkit-mask:linear-gradient(90deg, rgba(0,0,0,0) 0, white 10%, white 100%); 但 box-shadow 被忽略....

【问题讨论】：

标签： css gradient linear-gradients

【解决方案1】：

只需将 div 渐变从 (white, transparent) 更改为 (white, 放置 div 的元素的背景色)。

渐变阴影不支持css

【讨论】：

不可能。我的 div 容器的背景也是他自己的线性渐变，而不是固定颜色。