CSS背景圖片是Web設計中常見的一個元素，通過設置合適的背景圖片可以增加網頁的美觀性。在使用CSS背景圖片時，我們需要注意如何控制背景圖片的邊緣，避免出現不美觀的情況。 CSS中有三個與控制背景圖片邊緣相關的屬性：background-clip、background-origin和background-size。其中，background-clip屬性可以用來指定背景圖片的裁剪方式，取值有“border-box”、“padding-box”和“content-box”三種。border-box表示背景圖片沿邊框的邊緣裁剪，padding-box表示背景圖片從內邊距開始裁剪，content-box表示背景圖片只在內容部分顯示。這三種取值分別對應了CSS盒模型中的三個部分：邊框、內邊距和內容區。 background-origin屬性用來指定背景圖片的起始位置，取值也有三種：border-box、padding-box和content-box。不同于background-clip屬性可以控制裁剪位置，background-origin屬性只能指定背景圖片起始位置。 最后一個控制背景圖片邊緣的屬性是background-size，可以通過設置寬度和高度來控制背景圖片的尺寸。background-size屬性有多種取值方式，如“auto”、“cover”、“contain”等等。 通過使用這三個屬性，我們可以更好地控制背景圖片的顯示效果。比如，我們可以設置一個背景圖片，讓它的起始位置在padding-box邊緣，同時讓它沿內邊距邊緣裁剪，以避免出現圖片溢出的情況。 下面是一個示例代碼，使用了上述三個屬性來控制背景圖片的邊緣：

p {
background-image: url("example.jpg");
background-clip: padding-box;
background-origin: padding-box;
background-size: 100px 100px;
padding: 20px;
border: 1px solid black;
}

在上述代碼中，我們將背景圖片的裁剪方式設置為padding-box，起始位置也設置為padding-box。同時，我們通過設置background-size將圖片寬度和高度都限制在了100px。通過這樣的設置，即使背景圖片略大于內容區域，我們也可以避免出現圖片溢出的情況。 總的來說，通過使用background-clip、background-origin和background-size這三個屬性，我們可以更好地控制背景圖片的邊緣。這種控制方式可以為網頁設計增加更多的美感，同時也可以增加用戶體驗。