現代網站設計離不開圖片，而 CSS 可以在很多方面為圖片的呈現提供幫助。在這個 CSS 圖片大全中，我們將介紹一些有用的 CSS 技巧，使您的圖片擁有更好的效果和用戶體驗。

/*  1. 圖片邊框  */
img {
border: 2px solid #f1f1f1;
}
/*  2. 圖片圓角  */
img {
border-radius: 50%;
/* 或者指定像素值 */
border-radius: 10px;
}
/*  3. 圖片陰影  */
img {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
/*  4. 圖片模糊效果  */
img {
filter: blur(3px);
}
/*  5. 圖片灰色  */
img {
filter: grayscale(100%);
}
/*  6. 圖片反轉  */
img {
transform: rotate(180deg);
}
/*  7. 圖片大小調整  */
/* 按比例縮小 */
img {
width: 50%;
height: auto;
}
/* 按指定值縮小 */
img {
width: 200px;
height: 200px;
}
/*  8. 圖片變暗  */
img {
opacity: 0.5;
}
/*  9. 圖片透明度漸變  */
img {
transition: opacity .5s ease;
}
img:hover {
opacity: 0.7;
}
/*  10. 圖片背景  */
/* 使用 div 元素創建帶背景的圖片 */
/* 把圖片作為背景 */
img {
background-image: url('image.jpg');
}

以上是一些常用的 CSS 技巧，可以讓我們更好地處理圖片。您可以根據自己的需求和創意，調整這些技巧的屬性，以便實現您自己想要的效果。這些技巧既可以用于個人項目，也可以用于商業項目，都能提升網站的視覺效果。