img { border-radius: 20px; /* 添加圆角边框 */ box-shadow: 5px 5px 5px grey; /* 添加阴影效果 */ transition: all 0.3s ease-in-out; /* 添加过渡效果 */ } img:hover { transform: scale(1.1); /* 添加缩放效果 */ }
上面的代码演示了对图片添加圆角边框、阴影效果和鼠标悬浮放大特效的效果。这可以让图片更加突出,吸引用户的眼球。
除了上面提到的几个属性,css3img还可以添加滤镜、裁剪、旋转等效果,比如:
img { filter: grayscale(100%); /* 把图片变成灰色 */ clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%); /* 使图片变成梯形 */ transform: rotate(45deg); /* 旋转图片45度 */ }
使用css3img可以让大家轻松地实现各种图片效果,让网页看起来更加炫酷和有趣。不过需要注意的是,过多的效果可能会影响网页的加载速度,所以在使用时要谨慎选择。