CSS圖片向四周擴大是一種常見的網頁設計效果。通過調整圖片的外邊距和內邊距，使圖片以一種流動的方式放大，增強頁面的美觀度。本文將介紹如何實現這種效果。

img {
border-radius: 50%;
margin: 20px;
padding: 20px;
transition: all 0.3s;
}
img:hover {
margin: 10px;
padding: 10px;
transform: scale(1.2);
}

首先，我們需要為圖片指定圓形邊框。這可以通過設置border-radius屬性為50%來實現。接著，在圖片的上下左右分別添加20像素的外邊距和內邊距。然后，設置所有屬性的過渡時間為0.3秒，以實現流暢的效果。

最后，當鼠標懸停在圖片上時，將外邊距和內邊距減少到10像素，同時將圖片縮放至1.2倍大小，從而實現向四周擴大的效果。這可以通過:hover偽類和transform屬性來實現。

綜上，通過以上CSS代碼，我們可以實現圖片向四周擴大的效果，增強網頁的視覺效果。通過靈活運用這些屬性，我們可以創造出更多令人驚艷的效果。