CSS 邊框（Border）樣式詳解
CSS 提供了多種邊框樣式，使我們能夠控制元素的外觀。本文將詳細介紹 CSS 邊框的各種屬性及應用示例。
1. 基本邊框屬性
CSS 主要使用 border 相關屬性定義邊框，基本語法如下：
border: [邊框寬度] [邊框樣式] [邊框顏色];
示例：
div {border: 2px solid red;
}
1.1 border-width —— 邊框寬度
thin、medium、thick預定義值。- 具體值（如
2px、5px）。
示例：
div {border-width: 5px;
}
1.2 border-style —— 邊框樣式
常見邊框樣式：
solid（實線）dotted（點線）dashed（虛線）double（雙線）groove（凹陷）ridge（凸起）inset（內嵌效果）outset（外嵌效果）none（無邊框）
示例：
div {border-style: dashed;
}
1.3 border-color —— 邊框顏色
- 可使用顏色名稱（如
red）、十六進制（#ff0000）、RGB（rgb(255,0,0)）或 HSL 顏色值。
示例：
div {border-color: blue;
}
2. 單獨設置邊框
可以針對 top、right、bottom 和 left 單獨定義邊框：
border-top: 2px solid blue;
border-right: 4px dashed green;
border-bottom: 3px double red;
border-left: 5px groove orange;
示例：
div {border-top: 5px solid black;border-bottom: 3px dashed gray;
}
3. 圓角邊框（border-radius）
使用 border-radius 創建圓角或圓形邊框。
3.1 統一圓角
div {border-radius: 10px;
}
3.2 指定不同角的圓角
div {border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-right-radius: 30px;border-bottom-left-radius: 40px;
}
3.3 創建圓形
div {width: 100px;height: 100px;border-radius: 50%;
}
4. 復合邊框效果
可以結合 box-shadow 和 outline 創建更復雜的視覺效果。
4.1 outline 輪廓邊框
outline 不會占據額外的空間。
div {border: 2px solid black;outline: 3px dashed red;
}
4.2 結合 box-shadow 增強邊框
div {border: 3px solid blue;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
5. 動態邊框效果
5.1 懸停時改變邊框顏色
div:hover {border-color: red;
}
5.2 動畫邊框
@keyframes border-animation {0% { border-color: red; }50% { border-color: blue; }100% { border-color: green; }
}div {border: 5px solid;animation: border-animation 3s infinite;
}
6. 結論
本文介紹了 CSS 邊框的基本用法，包括邊框樣式、顏色、寬度、圓角、動態效果等。掌握這些技巧，可以讓你的網頁設計更加美觀生動！
