Summarize the new features of CSS3 (color) and the new features of css3.

Summarize the new features of CSS3 (color) and the new features of css3.
Color:

CSS3 adds the hsl (), hsla (), rgb (), and rgba () functions to create color values;

Hsl ():

Hsl functions: h (tone), s (saturation), l (brightness );

Tone: A value between 0 and. The value can be a decimal number.

Saturation and brightness: both percentages;

Cut from http://www.w3.org/wiki/CSS/Properties/color/HSL

White when brightness is 100%, black when brightness is 0%;

The color generated when the saturation is 100% and the brightness is 50% is the web security color.

Rgb ():

Rgb functions: r (red), g (green), B (blue) [three primary colors of computer];

The value can be any integer or percentage ranging from 0 to 25 5;

If the range is exceeded, obtain the latest valid value:

em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */

Cut from http://www.w3.org/wiki/CSS/Properties/color/RGB

Note that the percentage and value cannot appear in an rgb function at the same time;

Rgba () and hsla ():

The difference between the two and the above two lies in the (alpha) Transparency behind them;

Transparency is a value between 0 and 1, 0 is completely transparent, and 1 is completely transparent. transparency can be used to make a lot of good-looking results.

A simple example (of course--This example is not good-looking)

 

In the above example, a word similar to a variable is used (currentColor [case insensitive]).

CurrentColor can be used in all places where the color attribute is set.

The value is the color attribute value of the current element. If no value exists, look for the parent level until the root element. If no value is set, don't worry, and the default color of the browser proxy.

W3 has a brief explanation. If the element color attribute value is currentColor, it is regarded as 'color: inherit ';

One of the more practical aspects is to set the border color, color, and other attributes of the element, you only need to set the color. You only need to modify one of the subsequent changes, sub-elements can also be directly inherited using currentColor, but make sure that the sub-element does not display the declared color attribute value;

The value range of two length units (vw and FLAC) is [0-100].

VW indicates the screen width;

Gbit/s indicates the screen height;

There are two values, vmax and xmin, which are the maximum or minimum values of width and height;

Vw and VL can be used in calc () calculation;

By the way, opacity:

Opacity is used to set the transparency of elements: (value: 0-1)

IE8 can be replaced

 filter:Alpha(opacity=50) /*0-100*/

To achieve transparency;

The color is basically the same. If there is an error or supplement, please point out (ignore transparent ...)

References