• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 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;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持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);   /* 完全不透明 */ 
      
    默认值由useragent决定
    适用于所有元素
    继承性
    动画性
    计算值指定值

    实例

    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) }
    

    下篇:text-fill-color