zoukankan      html  css  js  c++  java
  • 颜色 | 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
  • 相关阅读:
    20155230 《Java程序设计》实验五 Java网络编程及安全
    20155230 2016-2017-2《Java程序设计》课程总结
    20155230 实验四《android程序设计》实验报告
    20155230 实验三《敏捷开发与XP实践》实验报告
    20155230 实验二《Java面向对象程序设计》实验报告
    20155230 2016-2017-2 《Java程序设计》第十周学习总结
    20155230 2016-2017-2 《Java程序设计》第九周学习总结
    20155230 2016-2017-2 《Java程序设计》第八周学习总结
    2017-2018-1 20155203 20155204 《信息安全系统设计基础》实验一:开发环境的熟悉
    2017-2018-1 20155204 《信息安全系统设计基础》第三周学习总结
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13234145.html
Copyright © 2011-2022 走看看