CSS3中提供了很多強大的動畫效果，其中邊框動畫是一個很酷炫的特效。而使用SVG創建邊框動畫更是讓人眼前一亮。

SVG是可縮放矢量圖形（Scalable Vector Graphics）的縮寫，它是一種以XML為基礎的圖形格式。與傳統的柵格圖像（像素圖像）不同，SVG圖像是矢量的，這意味著它們可以縮放到任意大小，而不會失去品質。

<div class="border">
<svg width="100%" height="100%" viewBox="0 0 120 120">
<path class="path" d="M10 10 H110 V110 H10 L10 10" />
</svg>
</div>
.border {
width: 300px;
height: 300px;
position: relative;
border: none;
margin: 0 auto;
}
.path {
stroke-dasharray: 424; /* 根據路徑長度設置 */
stroke-dashoffset: 424; /* 根據路徑長度設置 */
stroke: #f00;
stroke-width: 3px;
animation: draw 3s forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}

在上面的代碼中，我們使用了SVG的元素來創建邊框路徑。通過將它放在一個寬高為100%的SVG容器中，并設置viewBox屬性來確定路徑的大小及位置。

接下來，在CSS中，我們設置元素的stroke-dasharray和stroke-dashoffset屬性來實現路徑的繪制動畫效果。stroke-dasharray屬性規定了路徑在繪制時，每一段線的長度，而stroke-dashoffset則規定了線段的繪制起點。

最后，通過定義一個名為draw的關鍵幀動畫，將stroke-dashoffset屬性從總長度逐漸變為0，從而實現路徑的繪制效果。

總結，CSS3與SVG的結合使用使得邊框動畫更為多樣化和生動，這樣的動畫效果不僅可以應用在網頁頭圖、按鈕、圖標等元素上，也可以制作出更為復雜的動態效果。