CSS 設置上下邊框 在網頁設計中，有時候需要給某個元素設置上下邊框，來強調其重要性或者美觀性。下面我們來介紹一下如何通過 CSS 來實現上下邊框的設置。 使用 border 屬性 最基本的設置邊框的 CSS 屬性是 border，它可以控制元素邊框的樣式、寬度和顏色。我們可以通過設置 border-top 和 border-bottom 屬性來設置上下邊框。 如下代碼，表示設置一個寬度為 1 像素、紅色的實線上下邊框：

p {
border-top: 1px solid red;
border-bottom: 1px solid red;
}

這樣設置可以實現一個簡單的上下邊框效果。 使用 ::before 和 ::after 偽元素 另一種實現上下邊框效果的方法是使用 ::before 和 ::after 偽元素。我們可以利用 ::before 和 ::after 偽元素創建元素的前后內容，從而實現上下邊框的效果。 示例如下：

p {
position: relative;
}
p::before, p::after {
content: "";
position: absolute;
height: 1px;
width: 100%;
background-color: red;
}
p::before {
top: 0;
}
p::after {
bottom: 0;
}

這段代碼中，對 p 元素設置了定位為 relative，這樣后面的 ::before 和 ::after 偽元素才能相對于其定位。接下來，我們對偽元素設置了寬度 100%、高度 1 像素的紅色背景，分別定位在元素的頂部和底部，從而實現了上下邊框效果。 這種方法更加靈活，可以設置不同的線型、顏色和位置，達到更豐富的效果。 總結 在網頁設計中，通過 CSS 設置上下邊框是一種常見的操作。我們可以使用 border 屬性或者 ::before 和 ::after 偽元素來實現。通過靈活運用這些屬性，可以實現不同的邊框效果，使頁面更加美觀。