Web前端開發中，圖片和CSS樣式的使用是非常重要的。下面將介紹一些常用的圖片CSS樣式。

img {
max-width: 100%;
height: auto;
}

上述代碼是一個常用的圖片響應式樣式，可以使圖片在不同的設備大小下適應不同的屏幕大小。

background-image: url("img/background.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

上述代碼是一個設置背景圖片的樣式，其中background-image是指定圖片的路徑，background-size可以設置背景圖片的大小，cover代表圖片將鋪滿整個父容器，background-position設置圖片在父容器的位置，center指圖片居中，而background-repeat表示不重復。

border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

上述代碼是可以實現一個圓形圖片的效果，border-radius屬性可以將一個方形圖片變成圓形，而box-shadow可以添加圖片的陰影效果。

filter: grayscale(100%);
transition: 0.3s;

上述代碼是可以實現圖片黑白濾鏡效果的代碼，filter: grayscale(100%);可以將圖片變成黑白效果，而transition可以讓圖片變換的效果更加平滑。

綜上所述，圖片和CSS樣式在Web前端開發中扮演著非常重要的角色，通過一些常用的圖片CSS樣式，可以使頁面更加美觀和易于使用。