css3关于图片效果的 |清除.css样式

css居中方法，css中字体划线，css页面背景色，css 页面层级关系，ios css去除input默认样式，css 自适应文字垂直居中，清除.css样式 css3关于图片效果的 |清除.css样式

/* 图片边框效果 */
img {
border: 5px solid #ccc;
border-radius: 10px;
box-shadow: 0px 0px 10px #999;
}
/* 图片滤镜效果 */
.img-filter {
filter: grayscale(50%);
/* 其他滤镜效果
filter: blur(5px);
filter: brightness(50%);
filter: contrast(150%);
filter: invert(100%);
filter: sepia(100%);
*/
}
/* 图片缩放效果 */
.img-zoom {
transition: transform 0.5s;
}
.img-zoom:hover {
transform: scale(1.2);
}
/* 图片旋转效果 */
.img-rotate {
transition: transform 0.5s;
}
.img-rotate:hover {
transform: rotate(360deg);
}
/* 图片翻转效果 */
.img-flip {
transition: transform 0.5s;
}
.img-flip:hover {
transform: scaleX(-1);
}

以上是常见的一些图片效果，大家可以根据实际需求来使用对应的样式来创造想要的效果。当然，使用CSS3创造出美丽的图片效果不只限于这些样式，大家可以结合其他属性来创造更加丰富多彩的效果。