在學習CSS代碼時，我們常常需要使用一些圖片來幫助我們更好地理解和記憶代碼。下面就讓我們來看看一些可愛的CSS代碼學習圖片吧。

/* 使用圖片作為背景 */
background: url('example.jpg') no-repeat center center fixed;
/* 在文字中插入圖片 */
.content:before {
content: url('smiley.png');
padding-right: 10px;
}
/* 為圖片添加陰影效果 */
img {
box-shadow: 3px 3px 5px #888;
}
/* 為圖片添加邊框 */
img {
border: 1px solid #ccc;
}
/* 使圖片居中顯示 */
img {
display: block;
margin: 0 auto;
}
/* 使圖片變為圓形 */
img {
border-radius: 50%;
}
/* 使圖片變為灰色 */
img {
filter: grayscale(100%);
}
/* 使圖片變為黑白色 */
img {
filter: grayscale(100%) invert(100%);
}

以上這些CSS代碼可以幫助我們更好地使用圖片來裝飾我們的網頁或應用程序。希望大家能夠從中受益，更好地理解和使用CSS代碼。