CSS中可以使用不同的屬性來實(shí)現(xiàn)圖片效果，包括:

img {
max-width: 100%;
}
/* 水平翻轉(zhuǎn) */
.flip-horizontal {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
/* 垂直翻轉(zhuǎn) */
.flip-vertical {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
/* 旋轉(zhuǎn)180度 */
.rotate-180 {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/* 圓角 */
.rounded {
border-radius: 50%;
}
/* 灰階 */
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
/* 透明度 */
.opacity {
opacity: 0.5;
}

使用這些屬性可以輕松地實(shí)現(xiàn)各種各樣的圖片效果，例如水平/垂直翻轉(zhuǎn)、旋轉(zhuǎn)、圓角、灰階等。另外，通過改變透明度也可以實(shí)現(xiàn)一些特殊的效果。