<div> 變成邊框
<div> 是 HTML 中最常見的標簽之一，可以用來定義文檔中的一個分塊，通常用于布局。然而，我們有時候需要將 <div> 變成邊框，以突出顯示某些內容或者提供更好的視覺效果。在本文中，我們將詳細解釋如何通過 CSS 來實現這個效果。
在 CSS 中，我們可以使用邊框（border）屬性來給元素添加邊框。邊框可以是實線、虛線、點狀線等不同的樣式，可以是不同的顏色和寬度。接下來，我們將通過幾個代碼案例來詳細解釋如何將 <div> 變成邊框。
代碼案例一：

<style>
div {
border: 2px solid black;  
}
</style>
<div>
這是一個演示用的<div>元素。
</div>

在這個案例中，我們定義了一個 div 元素，并給它設置了一個 2 像素寬的黑色實線邊框。在瀏覽器中查看結果，可以看到 <div> 元素被一個黑色的邊框所包圍。
代碼案例二：

<style>
div {
border: 1px dashed red;
padding: 10px;
background-color: yellow;
}
</style>
<div>
這是一個帶背景顏色的演示用<div>元素。
</div>

這個案例中，我們給 <div> 元素添加了一個紅色的 1 像素虛線邊框，并設置了內邊距和背景顏色。內邊距是指元素內容與邊框之間的距離，可以用來控制內容和邊框之間的間隔。背景顏色使 <div> 元素的背景顯示為黃色。運行代碼后，在瀏覽器中可以看到 <div> 元素被一個帶背景顏色的紅色虛線邊框包圍。
代碼案例三：

<style>
div {
border: 3px dotted blue;
margin: 20px;
width: 200px;
height: 100px;
}
</style>
<div>
這是一個設置寬度和高度的演示用<div>元素。
</div>

在這個案例中，我們給 <div> 元素設置了一個 3 像素藍色的點狀邊框，并設置了外邊距、寬度和高度。外邊距是指元素與其他元素之間的距離，用來控制元素之間的間隔。設置了寬度和高度后，<div> 元素的尺寸將固定為 200 像素寬和 100 像素高。使用瀏覽器查看代碼結果，可以看到 <div> 元素被一個藍色的點狀邊框包圍，并且具有指定的寬度和高度。
通過上述案例，我們可以發現在 CSS 中，使用邊框屬性可以很方便地將 <div> 變成邊框。通過控制邊框的樣式、顏色和寬度，以及其他相關屬性如內邊距、外邊距、寬度和高度等，可以實現多樣化的邊框效果。希望這篇文章對你理解和使用 CSS 邊框屬性有所幫助！