In CSS3, a number of properties are added to define style in terms of color, including opacity, RGBA color, and CSS3 gradient.

Opacity

The value of this property is a number between 0 and 1, where 0 is fully transparent and 1 is opaque, as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div:first-child{
                height: 100px;
                width: 100px;
                background-color: rgb(255.201.198);
                opacity: 1;
            }
            div:nth-child(2) {height: 100px;
                width: 100px;
                background-color: rgb(255.201.198);
                opacity: 0.3;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
</html>
Copy the code

Two blocks of the same color, but changed the transparency, the effect is different:

Opacity functions not only on the background, but also on any content inside it.

Two, RGBA color

RGB is a color standard, by red, green and blue three color changes to get a variety of colors, RGBA is based on RGB added a transparency channel Alpha.

R, G, and B can be integers ranging from 0 to 255 or percentages ranging from 0 to 100%. The value of parameter A is transparency and ranges from 0 to 1 as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div:first-child{
                height: 100px;
                width: 100px;
                background-color: rgba(255.201.198.1);
            }
            div:nth-child(2) {height: 100px;
                width: 100px;
                background-color: rgba(255.201.198.0.3);
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
</html>
Copy the code

The browser displays:

Differences between RGBA and opacity:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div:first-child{
                height: 100px;
                width: 100px;
                background-color: rgba(255.201.198.0.3);
            }
            div:nth-child(2) {height: 100px;
                width: 100px;
                background-color: rgb(255.201.198);
                opacity: 0.3;
            }
        </style>
    </head>
    <body>
        <div>rgba</div>
        <div>opacity</div>
</html>
Copy the code

RGBA only applies to the corresponding background color, while opacity applies to the entire block of content (including all elements within it).

CSS3 gradient

In CSS3, there are two types of gradient, a linear gradient and a radial gradient.

1. Linear gradient

A linear gradient is a gradient that occurs on a straight line. Most of the gradients we see are linear gradients.

Background: Linear-gradient (direction, start color, end color)

There are two directions for linear gradient, one is to use Angle (deG) and the other is to use keyword, as shown in the following table:

Attribute values Corresponding Angle instructions
to top 0 deg From the bottom up
to bottom 180 deg Top to bottom (default)
to left 270 deg From right to left
to right 90 deg From left to right
to top left There is no From the bottom right to the top left
to top right There is no From the bottom left to the top right

The following is an example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
                background:linear-gradient(to right,rgb(245.99.99),rgb(248.203.119),yellow);
            }
        </style>
    </head>
    <body>
        <div></div>
</html>
Copy the code

The browser looks like this:

The start and end colors can be color names, RGB colors, or a list of values that gradient from the first color to the last, separated by commas.

2. Radial gradient

A radial gradient is a circular gradient of color from the inside out. A radial gradient is a circular or elliptical gradient. The color does not change along a straight line, but from a starting point in all directions.

Grammar:

background:radial-gradient(position,shape size,start-color,stop,color)

Position is used to define the center of the circle, shape size is used to define the size of the shape, shape is used to define the shape, size is used to define the size, start-color and stop-color are used to define the start and end colors.

Position and Shape size are optional parameters and are omitted as default values.

Center position

The position parameter is used to define the center of the radial gradient. There are two common substances: a length value (10px) and a keyword (top, center, bottom, left, right, or a combination of two).

The following is an example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
            }
            .div1{
                background: -webkit-radial-gradient(center,green,yellow);
            }
            .div2{
                background: -webkit-radial-gradient(top,green,yellow);
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
</html>
Copy the code

As you can see, the center of the first div is in the middle and the center of the second div is in the top, both with the position property:

shape size

The shape parameter defines the shape of the radial gradient, and the size parameter defines the size of the radial gradient.

Shape can take the following values:

Attribute values instructions
ellipse Oval (default)
circle circular

The value of size can be:

Attribute values instructions
closest-size Specifies that the radius length of the radial gradient is from the center of the circle to the edge nearest the center
closest-corner Specifies that the radius length of the radial gradient is the Angle from the center to the nearest center of the circle
farthest-side Specifies that the radius length of the radial gradient is from the center of the circle to the edge farthest from the center
farthest-corner Specifies that the radius length of the radial gradient is from the center of the circle to the Angle farthest from the center

When shape is different, there is an example as follows:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                height: 100px;
                width: 200px;
                display: table-cell;
                color: white;
                text-align: center;
                vertical-align: middle;
            }
            .div1{
                background: -webkit-radial-gradient(circle,green,yellow);
            }
            .div2{
                background: -webkit-radial-gradient(ellipse,green,yellow);
            }
        </style>
    </head>
    <body>
        <div class="div1">circle</div>
        <div class="div2">ellipse</div>
</html>
Copy the code

Div1 is round, div2 is oval:

If the size is different, the following is an example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                height: 100px;
                width: 200px;
                display: table-cell;
                color: white;
                text-align: center;
                vertical-align: middle;
            }
            .div1{
                background: -webkit-radial-gradient(circle closest-side,green,yellow);
            }
            .div2{
                background: -webkit-radial-gradient(circle closest-corner,green,yellow);
            }
            .div3{
                background: -webkit-radial-gradient(circle farthest-side,green,yellow);
            }
            .div4{
                background: -webkit-radial-gradient(circle farthest-corner,green,yellow);
            }
        </style>
    </head>
    <body>
        <div class="div1">closest-side</div>
        <div class="div2">closest-corner</div>
        <div class="div3">farthest-side</div>
        <div class="div4">farthest-corner</div>
</html>
Copy the code

This looks like this in the browser:

Start – color and stop – color

These two values are used to define the start and end colors, and radial gradients also accept a list of values that define radial gradients for multiple colors. In general, the color distribution of multi-color radial gradient is uniform, but we can add percentages to the color to make the color distribution uneven, as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            div{
                height: 100px;
                width: 100px;
                display: table-cell;
                color: white;
                text-align: center;
                vertical-align: middle;
            }
            .div1{
                background: -webkit-radial-gradient(circle,green 5%,red 30%,yellow 65%);
            }
            .div2{
                background: -webkit-radial-gradient(circle,green,red,yellow);
            }
        </style>
    </head>
    <body>
        <div class="div1">Nonuniform distribution</div>
        <div class="div2">Uniform distribution</div>
</html>
Copy the code

It looks like this in the browser:

In general, linear gradients are the most common.