CSS3變色跑馬燈邊框是一種非常實用和醒目的頁面效果，可以用來提高頁面的視覺效果和用戶體驗。下面我們來介紹一下如何實現這種效果。

/* CSS代碼 */
/* 兼容各大瀏覽器 */
@keyframes run {
0% {
border-bottom-color: #f00;
border-right-color: #09f;
border-top-color: #0c0;
border-left-color: #f93;
}
25% {
border-bottom-color: #09f;
border-right-color: #0c0;
border-top-color: #f93;
border-left-color: #f00;
}
50% {
border-bottom-color: #0c0;
border-right-color: #f93;
border-top-color: #f00;
border-left-color: #09f;
}
75% {
border-bottom-color: #f93;
border-right-color: #f00;
border-top-color: #09f;
border-left-color: #0c0;
}
100% {
border-bottom-color: #f00;
border-right-color: #09f;
border-top-color: #0c0;
border-left-color: #f93;
}
}
.border-run {
animation-duration: 4s;
animation-name: run;
animation-iteration-count: infinite;
animation-timing-function: linear;
border-style: solid;
border-width: 10px;
}

上面的代碼通過@keyframes規則定義了一個名為run的動畫，然后通過border-bottom-color、border-right-color、border-top-color和border-left-color四個CSS屬性分別指定了動畫中每個“站點”的邊框顏色。接下來通過animation-duration、animation-name、animation-iteration-count和animation-timing-function四個CSS屬性來指定動畫的一些基本屬性，最后在.border-run類中引用了這個動畫并定義了邊框的樣式和寬度。

這樣一來，只需在HTML標簽中添加類名border-run，即可使該標簽的邊框呈現一個漸變的跑馬燈效果。