今天我們要來講一下如何使用CSS制作圓形邊框。圓形邊框可以為網頁添加一些趣味和美感。下面我將為大家介紹3種不同的方法。 方法1：使用border-radius屬性 我們可以使用CSS3提供的border-radius屬性來實現圓形邊框的效果。具體實現代碼如下： pre{ border: 2px solid #333; border-radius: 50%; width: 100px; height: 100px; } 在這個例子中，我們給該元素設置了2像素寬的黑色實線邊框。使用border-radius屬性將該元素的邊框半徑設置為50%，這樣我們就可以得到一個完美的圓形邊框。 方法2：使用偽元素 另一種方法是使用CSS偽元素before和after。具體代碼如下： pre{ position: relative; border: 2px solid #333; width: 100px; height: 100px; } pre:before{ content: ""; position: absolute; top: -2px; left: -2px; border: 2px solid #333; width: 100%; height: 100%; border-radius: 50%; } 在這個例子中，我們先向給定的元素添加一個標準的矩形邊框，然后使用偽元素創建一個相同大小的圓形，最后使用border-radius將這個圓形變成圓形邊框。 方法3：使用SVG 我們也可以通過使用SVG來實現圓形邊框。SVG是一種通用矢量圖形語言，可以在瀏覽器中使用。具體實現代碼如下： pre{ border: 2px solid #333; width: 100px; height: 100px; border-radius: 50%; background-image: url("data:image/svg+xml,"); background-size: 100% 100%; } 在這個例子中，我們使用background-image將SVG代碼嵌入到CSS中，然后使用background-size將SVG圖像與元素大小匹配。 以上就是三種不同的方法來制作圓形邊框。您可以嘗試使用不同的方法來實現您的設計效果。