CSS設置邊框

一、邊框樣式

CSS提供了多種邊框樣式，包括實線（solid）、虛線（dashed）、點線（dotted）、雙線（double）等。設置邊框樣式可以使用border-style屬性，示例如下：

border-style: solid; /* 實線 */
border-style: dashed; /* 虛線 */
border-style: dotted; /* 點線 */
border-style: double; /* 雙線 */

同時可以通過縮寫的方式設置邊框樣式：

border: 2px dashed #ccc; /* 2像素寬的虛線邊框，顏色為灰色 */

在上面的示例中，border樣式同時設置了邊框寬度、樣式和顏色。

二、邊框寬度

CSS的邊框寬度分為細（thin）、中（medium）、粗（thick）、像素值等多種方式。設置邊框寬度可以使用border-width屬性，示例如下：

border-width: 2px; /* 2像素寬 */
border-width: medium; /* 中等寬度 */
border-width: thin; /* 細邊框 */
border-width: 1px 2px 3px 4px; /* 上、右、下、左的邊框寬度 */

以上示例中，設置邊框寬度可以通過像素值、關鍵字和多個值的方式實現。如果只設置一個值，則四個邊框都使用相同的寬度。

三、邊框顏色

CSS的邊框顏色支持十六進制、RGB、顏色名等多種方式。設置邊框顏色可以使用border-color屬性，示例如下：

border-color: #ccc; /* 灰色邊框 */
border-color: red; /* 紅色邊框 */
border-color: rgb(255, 0, 0); /* 紅色邊框 */
border-color: #f00 #0f0 #00f; /* 上、右、下、左的邊框顏色 */

以上示例中，設置邊框顏色可以通過十六進制、顏色名、RGB等方式實現。如果只設置一個值，則四個邊框都使用相同的顏色。

四、邊框圓角

CSS的邊框圓角可以通過border-radius屬性實現。該屬性可以設置一個或四個值，第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。示例如下：

border-radius: 10px; /* 所有角都為圓角，半徑為10像素 */
border-radius: 10px 20px; /* 左上角和右下角為圓角，半徑分別為10像素和20像素 */
border-radius: 10px 20px 30px; /* 左上角、右上角和左下角為圓角，半徑分別為10像素、20像素和30像素 */
border-radius: 10px 20px 30px 40px; /* 所有角都為圓角，半徑分別為10像素、20像素、30像素和40像素 */

以上示例中，可以通過設置border-radius屬性實現邊框圓角。默認情況下，邊框的角是直角的。