在網頁設計中，CSS 是非常常用的一種技術，其中邊框是我們常常需要控制的部分。除了一般的邊框效果，我們還可以通過 CSS 給邊框加上跑馬燈效果，讓網頁看起來更加生動有趣。 首先，我們需要為邊框添加樣式。我們可以使用 border 屬性來定義邊框的寬度、顏色和樣式。例如，下面的代碼給一個 div 元素添加了 2 像素的實線紅色邊框：

<div style="border: 2px solid red;">
這是一個 div 元素。
</div>

為了添加跑馬燈效果，我們需要在 div 的外部包裹一個容器，然后設置容器的 overflow 屬性為 hidden，這樣就可以隱藏容器外超出顯示范圍的元素。然后再為 div 元素添加一個動畫，讓它向左移動，從而產生跑馬燈效果。 下面的代碼展示了如何使用 CSS 給邊框添加跑馬燈效果：

<div class="border-container">
  <div class="border-content">
    這是一個 div 元素。
  </div>
</div>
<style>
.border-container {
  border: 2px solid red;
  overflow: hidden;
  width: 300px;
}
.border-content {
  margin-left: 300px;
  animation: marquee 5s linear infinite;
}
@keyframes marquee {
  0% {
    margin-left: 300px;
  }
  100% {
    margin-left: -600px;
  }
}
</style>

在這段代碼中，我們為 div 元素添加了一個 class 名稱為 border-content，然后在其上面定義了一個名為 marquee 的動畫，這個動畫有兩個關鍵幀，分別在 0% 和 100% 處。在 0% 處，我們設置 div 元素的 margin-left 屬性的值為 300px（容器的寬度），使其隱藏在容器的右側。在 100% 處，我們將 margin-left 屬性的值設為 -600px，使其向左移動，停在容器的左側。animation 屬性的值說明了動畫的名稱、持續時間、速度和重復次數，這里的值為 “marquee 5s linear infinite”，表示動畫名稱為 marquee，持續時間為 5 秒，速度為線性，重復次數為無限。 在樣式定義的末尾，我們使用 @keyframes 表示動畫的狀態，其中 0% 表示動畫開始時的狀態，100% 表示動畫結束時的狀態。在這個例子中，我們使用 margin-left 屬性來控制 div 元素的位置，從而實現了跑馬燈效果。 通過這種方式，我們可以為網頁的邊框添加跑馬燈效果，讓它更加生動有趣。當然，在實際應用中，我們可以根據需要自定義動畫的樣式和效果，讓網頁更加精彩。