css实现阴影效果box-shadow与滤镜(filter)

 2023-09-05 阅读 58 评论 0

摘要:实现不规则阴影效果 常见的样式 box-shadow box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); drop-shadow才是真正意义上的投影,而box-shadow只是盒阴影 它只会投影出真实图形的阴影 实例: filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2)); 常用环境

实现不规则阴影效果

常见的样式 box-shadow

box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);

drop-shadow才是真正意义上的投影,而box-shadow只是盒阴影

它只会投影出真实图形的阴影

实例: filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));

常用环境:
1,伪类三角形悬浮阴影效果

	```.div::after {position: absolute;bottom: 20%;right: 45px;content: '';display: block;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #ff8605;filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));}```

2,各类不规则阴影效果

	```.div {filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));}```

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://808629.com/1082.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 86后生记录生活 Inc. 保留所有权利。

底部版权信息