CSS中有很多樣式可以用來美化和布局網(wǎng)頁，其中包括圖片樣式。下面我們來介紹一些常見的圖片樣式。

/* 1. 圖片樣式基礎(chǔ) */
img {
display: block; /* 將圖片變?yōu)閴K級元素 */
max-width: 100%; /* 設(shè)置圖片最大寬度為父元素的100% */
height: auto; /* 高度自適應(yīng) */
margin: 0 auto; /* 居中 */
}
/* 2. 圖片圓角 */
.round {
border-radius: 50%; /* 設(shè)置圓角為50% */
overflow: hidden; /* 超出圓角的部分隱藏 */
}
/* 3. 圖片陰影 */
.shadow {
box-shadow: 0 0 5px #ccc; /* 設(shè)置陰影，可自行調(diào)整大小和顏色 */
}
/* 4. 圖片邊框 */
.border {
border: 1px solid #ccc; /* 設(shè)置邊框，可自行調(diào)整大小和顏色 */
}
/* 5. 圖片放大效果 */
.scale {
transition: all .4s ease-in-out; /* 設(shè)置過渡效果 */
cursor: pointer; /* 鼠標指針樣式為手型 */
}
/* 給放大效果的圖片添加鼠標懸浮事件 */
.scale:hover {
transform: scale(1.1); /* 鼠標懸浮時將圖片放大1.1倍 */
}
/* 6. 圖片模糊效果 */
.blur {
filter: blur(5px); /* 設(shè)置模糊效果，可自行調(diào)整大小 */
}
/* 7. 圖片灰度效果 */
.gray {
filter: grayscale(100%); /* 設(shè)置灰度效果，可自行調(diào)整亮度 */
}
/* 8. 圖片透明度 */
.opacity {
opacity: .7; /* 設(shè)置透明度，可自行調(diào)整 */
}

以上就是一些常見的CSS圖片樣式，通過組合使用不同的樣式，可以制作出更豐富的效果，讓網(wǎng)頁更美觀都美觀。