前端css颜色

在前端 CSS 里，颜色（Color） 是最基础也最常用的样式，几乎所有和「视觉色彩」相关的属性都离不开它。我给你整理一份最全、最清晰、最实用的 CSS 颜色相关属性清单，直接对照用就行。

---

一、最核心的颜色属性（必须掌握）

这些是日常开发 90% 都会用到的：

1. color

文字颜色

p { color: red; }

2. background-color

背景颜色

div { background-color: #fff; }

3. border-color

边框颜色

.box { border-color: blue; }

---

二、边框细分颜色（四个方向）

可以单独给上、右、下、左设置颜色：

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

---

三、轮廓、阴影颜色

4. outline-color

外轮廓颜色（不占布局）

button { outline-color: green; }

5. text-shadow 颜色

文字阴影颜色

h1 { text-shadow: 1px 1px 2px black; }

6. box-shadow 颜色

盒子阴影颜色

.card { box-shadow: 0 0 10px rgba(0,0,0,0.2); }

---

四、渐变相关（属于颜色值，但非常常用）

不是属性，是颜色值类型：

• linear-gradient() 线性渐变
• radial-gradient() 径向渐变
• conic-gradient() 锥形渐变

background: linear-gradient(red, blue);

---

五、装饰类颜色属性

7. accent-color

表单控件强调色（复选框、单选框、进度条）

input { accent-color: purple; }

8. caret-color

输入框光标颜色

input { caret-color: red; }

9. column-rule-color

多列布局分隔线颜色

.text { column-rule-color: gray; }

---

六、不常用但属于颜色体系的属性

10. text-decoration-color

文字装饰线颜色（下划线、删除线）

a { text-decoration-color: orange; }

11. text-emphasis-color

文字强调标记颜色

p { text-emphasis-color: pink; }

12. fill (SVG 内部颜色)

13. stroke (SVG 描边颜色)

---

七、CSS 支持的颜色表示方式（所有属性通用）

1. 关键字 ：red、blue、white、transparent
2. 十六进制 ：#ff0000、#f00、#ff000080（带透明度）
3. RGB / RGBA ：rgb(255,0,0)、rgba(255,0,0,0.5)
4. HSL / HSLA ：hsl(0,100%,50%)、hsla(0,100%,50%,0.5)
5. 现代 CSS 颜色 （Chrome 支持）：
   • hwb()
   • lch()
   • oklch()
   • color()

---

最终总结：前端 CSS 颜色属性大全

我给你浓缩成最精简记忆版：

文字

• color
• text-shadow
• text-decoration-color
• caret-color

背景

• background-color
• 渐变（linear-gradient）

边框

• border-color
• border-*-color
• outline-color

阴影

• box-shadow
• text-shadow

表单/控件

• accent-color

SVG

• fill
• stroke

---

总结

你在 CSS 里所有能写颜色的地方 ，就这些属性，覆盖 100% 场景。

日常开发最常用的只有 5 个：
color、background-color、border-color、box-shadow、accent-color。

如果你需要，我还能给你做一份颜色速查表 / 颜色代码大全。