color

该color属性设置前景色的颜色元素的文本内容。它不会影响元素的任何其他特征；请注意，颜色值必须是统一的颜色，从CSS3开始，颜色可能包括透明度值。它不可能是一个 <gradient> 。在CSS这是一个 <image>

示例

/* Keyword values */
color: currentcolor;

/* <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* rgb() values */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);

/* hsl() values */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);

/* Global values */
color: inherit;
color: initial;
color: unset;

浏览器支持

浏览器都支持 color
IE9以上版本浏览器都支持全部 color 表示法

语法：

color ： <named-color> | <hex-color> | rgb() | rgba() | hsl() | hsla()

取值：

• <named-color> ：英文字母。比如red, blue, brown, lightseagreen等，不区分大小写。

  color:red;    /* 红色 */
  color:black;  /* 黑色 */
  color:gray;   /* 灰色 */
  color:white;  /* 白色 */
  color:purple; /* 紫色 */
  

• <hex-color> ：十六进制符号#RRGGBB。"#"后跟 6 位或者 3 位十六进制字符（0-9, A-F）。

  color:#f03;
  color:#F03;
  color:#ff0033;
  color:#FF0033;
  

• rgb() ：规定颜色值为 rgb 代码的颜色，函数格式为 rgb(R,G,B)，取值可以是 0-255 的整数或百分比。

  rgb(255,0,51);
  rgb(255, 0, 51);
  rgb(100%,0%,20%);
  rgb(100%, 0%, 20%);
  

• rgba() ：RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。a 表示透明度：0=透明；1=不透明。

  rgba(255,0,0,0.1);    /* 10% 不透明 */  
  rgba(255,0,0,0.4);    /* 40% 不透明 */  
  rgba(255,0,0,0.7);    /* 70% 不透明 */  
  rgba(255,0,0,  1);    /* 不透明，即红色 */ 
  

• hsl() ：色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。饱和度和明度由百分数来表示。100%是满饱和度，而 0%是一种灰度。100%明度是白色， 0%明度是黑色，而 50%明度是"一般的"。

  hsl(120,100%,25%);   /* 深绿色 */  
  hsl(120,100%,50%);    /* 绿色 */       
  hsl(120,100%,75%);    /* 浅绿色 */    
  

• hsla() ：HSLa 扩展自 HSL 颜色模式，包含了阿尔法通道，可以规定一个颜色的透明度。 a 表示透明度：0=透明；1=不透明。

  hsla(240,100%,50%,0.05);   /* 5% 不透明 */   
  hsla(240,100%,50%, 0.4);   /* 40% 不透明 */  
  hsla(240,100%,50%, 0.7);   /* 70% 不透明 */  
  hsla(240,100%,50%,1);   /* 完全不透明 */ 
  

实例

element { color: red }
element { color: #f00 }
element { color: #ff0000 }
element { color: rgb(255,0,0) }
element { color: rgb(100%, 0%, 0%) }
element { color: hsl(0, 100%, 50%) }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5) }
 
element { color: hsla(0, 100%, 50%, 0.5) }