在CSS中，我們可以使用border-radius屬性將元素的邊框變成圓角，但有時候我們希望將元素的背景也變成圓形，這該怎么做呢？

答案是使用CSS3中的clip-path屬性，配合border-radius屬性即可輕松實現。

.rounded-background {
background: url("your-bg-image.jpg");
background-size: cover;
border-radius: 50%;
-webkit-clip-path: circle(50% at center);
clip-path: circle(50% at center);
}

代碼中我們首先指定元素的背景圖片及其大小，然后將邊框的角度設為50%即可讓元素成為圓形。接著使用clip-path屬性，將形狀指定為圓形，其參數為“circle”，后面跟著圓形的半徑，這里我們也設為50%；再緊接著的參數是圓心的位置，這里我們將其設為中心位置即“at center”。

以上代碼可以用于所有容器元素，如div、section等。

如果你需要將圖片元素變成圓形，同樣可以使用上述方法實現。

.rounded-image {
width: 200px;
height: 200px;
border-radius: 50%;
-webkit-clip-path: circle(50% at center);
clip-path: circle(50% at center);
}

在這里我們將圖片的高寬設為固定值，當然也可以使用其他單位或百分比來指定大小，然后將邊框角度和圓形半徑設置為50%，再使用clip-path屬性即可輕松實現圖片圓形化。

總的來說，使用 clip-path屬性，我們可以將元素的背景或圖片簡單、快速地變成圓形，不需要復雜的JS代碼，非常便捷。