如何使用CSS為DIV添加邊框線？

一、使用border屬性添加邊框

使用CSS的border屬性可以為HTML中的元素添加邊框線，其語法格式如下：

div {
    border: [border-width] [border-style] [border-color];
}

其中，border-width用於設置邊框的寬度，border-style用於設置邊框的樣式，border-color用於設置邊框的顏色。

具體的數值和屬性值可以根據實際需要進行調整，例如：

div {
    border: 2px solid black;
}

這段代碼會為對應的div元素設置一個寬度為2px，樣式為實線，顏色為黑色的邊框線。

二、使用outline屬性添加輪廓線

與border不同，outline屬性不會佔用空間，而是在元素周圍添加一個輪廓線。其語法格式如下：

div {
    outline: [outline-width] [outline-style] [outline-color];
}

同樣的，outline-width用於設置輪廓線的寬度，outline-style用於設置輪廓線的樣式，outline-color用於設置輪廓線的顏色。

例如，這段代碼會為對應的div元素添加一個3px寬度，樣式為雙實線，顏色為紅色的輪廓線：

div {
    outline: 3px double red;
}

三、使用box-shadow屬性添加陰影邊框

除了使用border和outline屬性之外，我們也可以使用box-shadow屬性來為元素添加一種類似於邊框的效果。其語法格式如下：

div {
    box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];
}

其中，horizontal-offset和vertical-offset用於設置陰影的位置（即與元素的水平和垂直方向的偏移量），blur-radius用於設置陰影的模糊半徑，spread-radius用於設置陰影的擴散半徑，color用於設置陰影的顏色。

例如，這段代碼會為對應的div元素添加一個水平方向偏移量為0，垂直方向偏移量為3px的陰影邊框，其模糊半徑為5px，擴散半徑為0，顏色為黑色：

div {
    box-shadow: 0 3px 5px 0 black;
}

四、不同樣式的邊框線效果

除了常規的實線邊框外，我們還可以設置其他樣式的邊框線。以下是一些常見的邊框線效果的代碼演示：

/* 虛線邊框 */
div {
    border: 1px dotted black;
}

/* 雙實線邊框 */
div {
    border: 3px double black;
}

/* 圓角邊框 */
div {
    border: 2px solid black;
    border-radius: 10px;
}

/* 漸變邊框 */
div {
    border: 3px solid transparent;
    background-image: linear-gradient(to right, red, orange, yellow, green);
}

五、總結

通過本文的介紹，我們可以學習到如何使用border、outline和box-shadow屬性為DIV元素添加不同樣式的邊框線。同時，我們也可以發現，除了常規的實線邊框外，其他樣式的邊框線同樣可以為界面增添多種多樣的效果。