HTML Input 邊框顏色上下不一致：Border-color 單值賦值機制

現象

設置 input { border-color: red; } 後，發現輸入框上邊框和下邊框顏色深淺不一，或呈現 3D 凹凸效果。

原因分析

border-color 接受 1-4 個值，對應四邊：

• 1 值：四邊同色 border-color: red; ≡ border-color: red red red red;
• 2 值：上下、左右 border-color: red blue; ≡ red blue red blue;
• 3 值：上、左右、下 border-color: red blue green; ≡ red blue green blue;
• 4 值：上、右、下、左（順時針）

但瀏覽器默認 User Agent 樣式表 為 <input> 設置了 border-style: inset（或 outset），這會導致瀏覽器自動計算亮暗邊框 模擬 3D 效果：

• 上/左邊框：較亮（高光）
• 下/右邊框：較暗（陰影）

解決方案

方案一：重置 border-style 為 solid（推薦）

input {
    border: 1px solid red; /* 同時設置寬度、樣式、顏色 */
    /* 或分開寫 */
    border-width: 1px;
    border-style: solid;   /* 關鍵：覆蓋默認 inset */
    border-color: red;
}

方案二：使用 border 單屬性簡寫

input {
    border: 1px solid #ff0000; /* 最簡潔，覆蓋所有默認 */
}

方案三：保留 3D 效果但自定義顏色

input {
    border-style: inset;
    border-width: 2px;
    /* 瀏覽器會基於此顏色自動生成亮/暗變體 */
    border-color: #4CAF50; 
}

調試技巧

1. 打開開發者工具（F12） → Elements → Computed 面板，查看 border-top-color、border-bottom-color 計算值。
2. 檢查 User Agent Stylesheet 中的 border-style 定義。
3. 嘗試 input { border-style: solid !important; } 驗證是否為樣式衝突。

總結

Input 邊框顏色上下不一致， 99% 因默認 border-style: inset 導致瀏覽器自動生成 3D 亮暗邊。解決方法：顯式設置 border-style: solid 或使用 border: 1px solid color 簡寫，徹底覆蓋默認樣式。