颜色 | color (Color)

  •   CSS 中文开发手册

    颜色 | color (Color) - CSS 中文开发手册

    colorCSS属性设置元素的文本内容和文本修饰的前景色值。它还设置currentcolor值，可用作其他属性的间接值，并且是其他颜色属性（如边框颜色）的默认值。

    有关在HTML中使用颜色的概述，请参阅使用CSS将颜色应用于HTML元素。

    /* 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。它不能是一个<gradient>，这实际上是一种<image>类型。

    初始值

    Varies from one browser to another

    适用元素

    all elements. It also applies to ::first-letter and ::first-line.

    是否是继承属性

    yes

    适用媒体

    visual

    计算值

    If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).

    Animation type

    a color

    正规顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    该color属性被指定为单个color值。

    值

    <color>设置元素的文本和装饰部分的颜色。

    正式语法

    <color>where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

    示例

    以下是使段落的文字变为红色的所有方法：

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

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

    规范

    Specification

    Status

    Comment

    CSS Color Module Level 4The definition of 'color' in that specification.

    Editor's Draft

    Adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. Allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them. Adds color keyword rebeccapurple. Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value. Adds hwb(), device-cmyk(), and color() functions.

    CSS TransitionsThe definition of 'color' in that specification.

    Working Draft

    Defines color as animatable.

    CSS Color Module Level 3The definition of 'color' in that specification.

    Recommendation

    Deprecates system-colors. Adds SVG colors. Adds the rgba(), hsl(), and hsla() functions.

    CSS Level 2 (Revision 1)The definition of 'color' in that specification.

    Recommendation

    Adds the orange color and the system colors.

    CSS Level 1The definition of 'color' in that specification.

    Recommendation

    Initial definition.

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari (WebKit)

    keywords colors

    1.0

    1.0 (1.0)

    3.01

    3.5

    1.0 (85)

    #RRGGBB, #RGB

    1.0

    1.0 (1.0)

    3.0

    3.5

    1.0 (85)

    rgb()

    1.0

    1.0 (1.0)

    4.0

    3.5

    1.0 (85)

    hsl()

    1.0

    1.0 (1.5)

    9.0

    9.5

    3.1 (525)

    rgba(), hsla()

    1.0

    3.0 (1.9)

    9.0

    10.0

    3.1 (525)

    currentcolor

    1.0

    1.5 (1.8)

    9.0

    9.5

    4.0 (528)

    transparent

    1.0

    3.0 (1.9)

    9.02

    10.0

    3.1 (525)

    rebeccapurple

    38.0

    33 (33)

    11

    25.0

    7.1

    #RRGGBBAA, #RGBA

    No support3

    49 (49)

    ?

    No support4

    9.1

    rgba() and hsla() as aliases of rgb() and hsl() Space-separated function parameters rather than commas Percentages for alpha values Angles for the hue component in hsl() colors.

    ?

    52 (52)

    ?

    ?

    ?

    Feature

    Android

    Firefox Mobile (Gecko)

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    rgba(), hsla()

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    (Yes)

    rebeccapurple

    (Yes)

    33.0 (33)

    ?

    ?

    8

    #RRGGBBAA, #RGBA

    No support3

    49.0 (49)

    No support

    No support

    ?

    rgba() and hsla() as aliases of rgb() and hsl() Space-separated function parameters rather than commas Percentages for alpha values Angles for the hue component in hsl() colors.

    ?

    52.0 (52)

    ?

    ?

    ?

    		 
  •   CSS 中文开发手册
    转载请保留页面地址：https://www.breakyizhan.com/css/32463.html
    【推广】 免费学中医，健康全家人
    原文地址：https://www.cnblogs.com/breakyizhan/p/13234145.html