一、基礎概念
CSS 的 border 屬性可以為元素添加邊框，其中包括邊框的寬度、樣式和顏色。
使用 border-color 屬性可以為邊框指定顏色。
二、語法
div {
border-color: red;
}
上述代碼可以為所有的 div 元素添加紅色邊框。
border-color 屬性同時可以設定多個顏色值，來設置對應垂直方向上四條邊的邊框顏色。如下所示：
div {
border-color: red green blue yellow;
}
上述代碼中，分別設置上、右、下、左四條邊為紅色、綠色、藍色、黃色。
三、其他用法
1. 使用不同的顏色為每條邊指定顏色
使用上述語法中的參數個數為4個，分別代表 top, right, bottom 和 left 的顏色。但也可以為某些邊只設定特定的顏色，比如為左邊和右邊設定相同的顏色，而其餘兩條邊設定不同的顏色，如下所示：
div {
border-color: red green blue red;
}
上述代碼中，左右邊的顏色為紅色，上邊的顏色為綠色，下邊的顏色為藍色。
2. 使用透明度為邊框添加半透明效果
使用 rgba 顏色值可以為邊框添加半透明效果，如下所示：
div {
border-color: rgba(255, 192, 203, 0.5);
}
上述代碼中，為 div 元素的邊框添加了粉色，透明度為0.5的半透明效果。
3. 針對不同狀態的邊框顏色
使用 :hover 等偽類選擇器可以為元素不同狀態下指定不同的邊框顏色：
div {
border: 2px solid blue;
}
div:hover {
border-color: red;
}
上述代碼中，為 div 元素添加了2像素粗的藍色實邊框，當滑鼠懸停於該元素上方時，邊框顏色會變為紅色。
四、總結
使用 border-color 屬性可以為元素添加邊框的顏色，它支持單獨為每條邊設置顏色，也可以使用 rgba 顏色值添加半透明效果。此外，還可以使用偽類選擇器為元素不同狀態下設置不同顏色的邊框，從而豐富頁面的交互效果。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/186134.html
微信掃一掃 
支付寶掃一掃 