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

  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 中文开发手册

  本文标题：颜色 | color (Color) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32463.html