下面介绍一些常用的CSS3图片阴影效果:
/* 1. 简单的投影效果 */ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 2. 内阴影效果 */ box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5); /* 3. 多重投影效果 */ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5); /* 4. 模糊效果 */ filter: blur(5px); /* 5. 灰度效果 */ filter: grayscale(100%); /* 6. 透明度效果 */ filter: opacity(50%);
使用这些属性可以轻松地实现各种图片阴影效果,可以根据实际需要进行调整和组合。