CSS跑馬燈七彩邊框是一種酷炫的效果，可以為網站增加一些動感和活力。

/* 定義CSS樣式表 */
.marquee {
height: 50px; /* 跑馬燈高度 */
overflow: hidden; /* 隱藏超出部分 */
box-sizing: border-box; /* 盒子模型 */
border: 5px solid #333; /* 邊框樣式 */
border-radius: 25px; /* 邊框半徑 */
padding: 10px; /* 內邊距 */
margin-bottom: 20px; /* 下邊距 */
position: relative; /* 相對定位 */
}
.marquee:before {
content: ""; /* 偽元素 */
position: absolute; /* 絕對定位 */
width: 5px; /* 寬度 */
height: 100%; /* 高度 */
left: 0; /* 左側對齊 */
top: 0; /* 頂部對齊 */
background-color: #3f51b5; /* 藍色 */
animation: move 4s linear infinite; /* 動畫效果 */
}
.marquee:after {
content: ""; /* 偽元素 */
position: absolute; /* 絕對定位 */
width: 5px; /* 寬度 */
height: 100%; /* 高度 */
right: 0; /* 右側對齊 */
top: 0; /* 頂部對齊 */
background-color: #ff5722; /* 橙色 */
animation: move 4s linear infinite; /* 動畫效果 */
}
@keyframes move {
0% {
transform: translateX(0); /* 初始位置 */
}
100% {
transform: translateX(100%); /* 移動到最右側 */
}
}

以上代碼中，我們定義了一個名為“.marquee”的CSS樣式表，它包含了跑馬燈的基本樣式，以及兩個偽元素“:before”和“:after”，分別用于定義跑馬燈的兩側邊框顏色和動畫效果。

其中，“box-sizing: border-box;”表示使用邊框盒模型計算元素的寬度和高度，而“animation: move 4s linear infinite;”則定義了跑馬燈的動畫效果和持續時間。

跑馬燈七彩邊框是一種易于實現、視覺效果鮮明的CSS效果，它的應用范圍廣泛，可以用在博客、新聞網站、電商平臺等網站中，為用戶帶來更好的閱讀體驗和視覺感受。