CSS波點邊框是一種很酷的邊框樣式，它可以在網頁布局中起到很好的裝飾作用。下面我們來學習如何使用CSS實現波點邊框。

.border {
border: 5px dotted #000;
border-image-source: 
radial-gradient(circle 4px at 50% 0px, #000, transparent 80%),
radial-gradient(circle 4px at 0px 50%, #000, transparent 80%),
radial-gradient(circle 4px at 50% 100%, #000, transparent 80%),
radial-gradient(circle 4px at 100% 50%, #000, transparent 80%);
border-image-slice: 1;
border-image-repeat: repeat;
border-image-width: 5px;
}

以上代碼中，我們首先定義一個名為“.border”的CSS類，接著使用“border”屬性定義了邊框的線型、寬度和顏色。然后通過“border-image-source”屬性使用四個徑向漸變實現波點邊框，其中“circle 4px”表示每個圓的半徑為4px，“at”屬性用于確定每個圓的位置，“transparent”表示漸變效果為透明，“80%”用于實現波點形狀。我們還使用了“border-image-slice”屬性將邊框分割成大小相等的圖片，并通過“repeat”屬性重復渲染邊框，最后使用“border-image-width”屬性設置邊框寬度為5px。

通過上述代碼，我們可以輕松地實現一個漂亮的波點邊框，讓網頁布局更加生動有趣。