css3 下阴影-CSS为不规则图片设置阴影（发光效果）

bendan520 css3

2023-08-27 0 2,144 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

问题：

实现对不规则的图片设置阴影，使其看起来发光的效果，box-shadow确实可以添加阴影，而且只适合div和一些规则的图片，如图：

解决方案：

CSS有一个滤镜功能，就是给图片设置阴影效果。阴影是在图像下方合成的描边图像的倾斜版本，可以选择模糊css3 下阴影，并以特定颜色绘制。不仅“inset”关键字是不允许的。该功能与现有的 box-shadow 属性非常相似；不同的是，通过过滤器，一些浏览器提供硬件加速以获得更好的性能。

注意：Internet Explorer 不支持过滤器属性。

首先图片的背景颜色必须是透明的（无白底、镂空），然后设置图片的样式：

filter: drop-shadow(0px 0px 20px rgb(9, 187, 189));

功效：

查看filter的其他属性值：





img {
    width: 20%;
    height: auto;
    float: left; 
}
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {
	-webkit-filter: drop-shadow(8px 8px 10px green);
	filter: drop-shadow(0px 0px 10px green);
	margin: 15px;
}



注意： Internet Explorer 不支持 filter 属性。

跑步疗效：

如有疑问css3 下阴影，欢迎交流~~！

收藏 (0) 打赏

感谢您的支持，我会继续努力的!