css颜色属性详细说明以及案例

CSS 颜色属性

CSS 颜色属性用于设置元素的文本颜色、背景颜色、边框颜色等。常用的颜色属性包括 color、background-color、border-color 等。

1. color 属性

• 作用：设置文本的颜色。

• 语法：color: <color>;

• 取值：

• 颜色名称（如 red, blue, green）

• 十六进制值（如 #ff0000, #00ff00）

• RGB 值（如 rgb(255, 0, 0), rgb(0, 255, 0)）

• RGBA 值（如 rgba(255, 0, 0, 0.5)）

• HSL 值（如 hsl(0, 100%, 50%)）

• HSLA 值（如 hsla(0, 100%, 50%, 0.5)）

案例：

p {
  color: red;
}

2. background-color 属性

• 作用：设置元素的背景颜色。

• 语法：background-color: <color>;

• 取值：同 color 属性。

案例：

div {
  background-color: #00ff00;
}

3. border-color 属性

• 作用：设置元素的边框颜色。

• 语法：border-color: <color>;

• 取值：同 color 属性。

案例：

div {
  border-color: rgb(0, 0, 255);
  border-width: 2px;
  border-style: solid;
}

4. opacity 属性

• 作用：设置元素的透明度。

• 语法：opacity: <value>;

• 取值：0 到 1 之间的值，0 表示完全透明，1 表示完全不透明。

案例：

img {
  opacity: 0.5;
}

5. currentColor 关键字

• 作用：使用当前元素的 color 属性值作为颜色。

• 语法：<property>: currentColor;

案例：

div {
  color: blue;
  border: 2px solid currentColor;
}

综合案例

body {
  color: #333;
  background-color: #f0f0f0;
}

h1 {
  color: rgba(255, 0, 0, 0.8);
}

div {
  background-color: hsl(120, 100%, 50%);
  border: 2px solid currentColor;
  opacity: 0.9;
}