Basics of CSS3 notes (b) color and gradient colors

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/u013205165/article/details/90446042

The effect of a color of RGBA

RGB is a color standard, is composed of red (R & lt),, blue (B) change in green (G) and superimposed on each other to obtain a variety of colors. RGBA control is increased on the basis of the RGB alpha parameter transparency.

grammar:

color:rgba(R,G,B,A)

The above R, G, B three parameters, a positive integer value in the range of: 0 - 255. Percentage value in the range of: 0.0% - 100.0%. Out of range value will be a value up to the limit of its closest. Not all browsers support the use of a percentage value. A is a transparency parameter, values ​​between 0 and 1, can not be negative.

Code Example:

background-color:rgba(100,120,60,0.5);

Effect Second, gradient colors

CSS3 Gradient  into linear gradient (Linear) and radial gradient (Radial) . Because different rendering engine to achieve gradient syntax, here we only W3C standard syntax for linear gradients to analyze its usage, the rest we can access relevant information. W3C syntax has been supported by IE10 +, Firefox19.0 +, Chrome26.0 + and Opera12.1 + and other browsers.

This section us about linear gradient:

 

parameter:

The first parameter: specifies the gradient direction , you can use the " angle " or the keyword "English" to indicate:

(Click picture to enlarge)

The first parameter is omitted, the default is "180deg", equivalent to the "to bottom".

The second and the third parameter represents the color of start and end points , there may be a plurality of color values.

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

Renderings:

Above reference to the Mu class network Tutorial: https://www.imooc.com/code/617

 

Guess you like

Origin blog.csdn.net/u013205165/article/details/90446042