CSS 提供了許多方法來控制內容的顯示方式，其中一個常見的問題是在圖片的邊緣部分出現內容溢出的情況。這種情況常常會破壞頁面的整潔度和美感，因此需要通過 CSS 來解決。 一個比較簡單的解決方案是使用裁剪屬性，這種方式可以將超出顯示區域的內容隱藏起來。具體來說，我們可以通過設置 overflow 屬性為 hidden，這樣就可以將內容裁切在顯示范圍內。同時，我們還可以使用 clip 屬性，通過設定一個矩形框來限定圖片的顯示范圍，這樣圖片就不會超出盒子的范圍了。 以下是一個示例代碼：

.p-box{
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
.p-box img{
position: absolute;
top: 0;
left: 0;
/* 設置裁剪屬性 */
overflow: hidden;
/* 設置矩形框 */
clip: rect(0, 150px, 150px, 0);
}

上述代碼中，我們設置了一個父級元素 .p-box 來包裹圖片，然后將圖片的 position 屬性設為 absolute，通過 top 和 left 屬性來定位圖片的位置。接著，我們設置了裁剪屬性 overflow: hidden，以及矩形框 clip: rect(0, 150px, 150px, 0)，其中 rect() 的參數依次為 top、right、bottom、left，表示矩形框的位置和大小。 通過這種方式，我們可以很好地解決圖片超出顯示區域的問題，同時確保頁面的整潔度和美觀性。當然，除了裁剪屬性外，CSS 還提供了其他的解決方案，如調整圖片大小、調整盒子尺寸等，具體應該根據實際情況選擇最佳方案。