Summary of new features of CSS3 (color)_html/css_WEB-ITnose

Color:

CSS3 has added four new functions: hsl(), hsla(), rgb(), rgba() to create color values;

hsl():

hsl function: h (hue), s (saturation), l (brightness);

Hue: a value between 0-360 [After experimentation, it can as a decimal];

Saturation and brightness: both are percentages;

The picture below is taken from http://www.w3.org/wiki/CSS/Properties/color/HSL

When the brightness is 100%, it is white, and when the brightness is 0%, it is black;

The colors generated when the saturation is 100% and the brightness is 50% are web safe colors

rgb():

rgb function: r(red),g(green),b(blue)[computer three primary colors];

The value can be 0-255 Any integer or percentage;

If out of range, take the nearest 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%) */

The following picture is taken from http://www.w3.org/ wiki/CSS/Properties/color/RGB

One thing to note is that percentage and numerical value cannot appear in an rgb function at the same time;

rgba() and hsla( ):

The difference between these two numbers and the two above is the transparency of a (alpha) in the back;

Transparency is a value between 0-1, 0 is fully transparent, 1 is fully transparent Opaque, you can use transparency to create many beautiful effects

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

The one used in the above example Words similar to variables (currentColor [case-insensitive])

currentColor can be used in all places where color attributes are set.

takes the value of the color attribute of the current element. If not, look for it Parent, all the way to the root element, if not set, don’t worry, there is also the default color of the browser proxy.

w3 official has a brief explanation, if the element color attribute value is currentColor, then Regarded as 'color:inherit';

A more practical place is that when setting the element border color, color (color), and other attributes, you only need to set the color (color); when making subsequent changes, you only need to One modification: child elements can also directly inherit and use currentColor, but you need to ensure that the child element does not explicitly declare the color attribute value;

There are also two length units (vw, vh) used in the value range [0-100 ]

100vw is the screen width;

100vh is the screen height;

There are also two values, vmax and xmin, which are to get the maximum or minimum value of width and height respectively;

vw and vh can participate in the calculation of calc();

By the way, let’s introduce opacity:

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

IE8 can use alternative

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

to achieve transparency;

Basically these are the colors, if there are any errors Or please point out (ignoring transparent...)

References