CSS智慧阴影

我们可以根据不同类型的图片，来创建不同的彩色阴影，如下图所示：

上代码：

<div id='div1' class="img shadow"></div>

.shadow {
	position: relative
}

.shadow::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	background: inherit  /*继承父元素的背景，关键所在*/
	background-position: center center;
    /*使用filter属性给背景添加阴影和模糊效果*/
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .5)) blur(18px); 
	z-index: -1; /*让背景处于图片的下方*/
}

原文地址：纯 CSS 创建五彩斑斓的智慧阴影！让前景图片自动转化为对应彩色的背景阴影 (opens new window)