html css如何渐变阴影,css – 是否可以将阴影作为渐变？

可以在绝对定位的伪元素上使用渐变来模拟,使用z-index使其出现在其父元素下面.

HTML：

CSS：

.e {

position: relative;

width: 10em;

height: 10em;

margin: 1em;

background: lemonchiffon;

}

.e:before {

position: absolute;

z-index: -1;

top: 10%; left: 10%;

width: 100%;

height: 100%;

background: linear-gradient(transparent, navy);

content: '';

}

如果你想让阴影有一个褪色的边缘,那么你必须给这个伪元素一个插入阴影(与.e的父背景颜色相同).

box-shadow: inset 0 0 .5em .5em white;

请注意,这在IE9及更早版本中无效.您可以使用过滤器渐变,但不能使用伪元素,因此在这种情况下您需要做的是将子项添加到元素(仅适用于IE)并将其设置为样式,就像设置伪元素一样.

编辑：如果你想让它在图像,渐变背景上工作,那么我担心它有点棘手,而且只能在IE9和旧版本中使用CSS来完成.但是,在其他浏览器的当前版本中,这可以使用线性渐变和三个径向渐变来实现.

相关CSS：

.e {

width: 25em; /* give it whatever width and height you like */

height: 25em;

/* make padding on right and bottom larger by adding the amount taken by

* the "shadow"

*/

padding: 5% 10% 10% 5%;

box-sizing: border-box;

/* change navy to red in each of these at one time to see what each

* gradient covers

*/

background:radial-gradient(at top right, navy, transparent 70.71%) 0 100%,

radial-gradient(at top left, navy, transparent 70.71%) 100% 100%,

radial-gradient(at bottom left, navy, transparent 70.71%) 100% 0,

linear-gradient(navy, transparent) 50% 100%;

background-repeat: no-repeat;

background-size: 95% 95%, 5%, 5%, 5% 95%, 90% 5%;

}