Css3, css3 Animation

Css3, css3 Animation

CSS3 is an upgraded version of CSS2, and 3 is only a version number. It adds many powerful new functions based on CSS2.1. Currently, mainstream browsers such as chrome, safari, firefox, opera, and even 360 support most of CSS3 functions. IE10 will support CSS3 in the future. Different browsers may require different prefixes when writing CSS 3 styles. It indicates that the CSS attribute or rule has not yet become part of the W3C standard and is a private attribute of the browser. Although a newer version of the browser does not require a prefix, however, to better forward-compatible prefixes are indispensable.

Prefix	Browser
-Webkit	Chrome and safari
-Moz	Firefox
-Ms	IE
-O	Opera

What benefits does CSS3 bring to us? To put it simply, CSS3 only needs a few lines of code to implement a lot of effects or even animated effects that were previously implemented using images and scripts. Such as rounded corners, image borders, text shadows and box shadows, transitions, and animations.

 

1. A border (border-radius) is used to add a border to the element.

Border-radius: 5px 4px 3px 2px;/* The Four radius values are the upper left corner, the upper right corner, the lower right corner, and the lower left corner, clockwise */

2. shadow)

Box-shadow: X axis offset Y axis offset [shadow blur radius] [shadow extended radius] [shadow color] [Projection mode];

　　

Note: inset can be written in the first or last parameter. Other positions are invalid.

. Box_shadow
{

Box-shadow: 4px 2px 6px #333333 inset;

}

Add Multiple shadows:

The above syntax is so simple. If you add multiple shadows, you only need to use commas to separate them. For example:

. Box_shadow {box-shadow: 3px 2px 5px # f00,-3px-2px 5px #000, 0px 0px 12px 5px #33CC00 inset ;}

 

3. border application image (border-image)

Border-image Syntax:

　　

Code:

# Border_image {
Margin: 0 auto;
Height: 100px;
Line-height: 100px;
Text-align: center;
Font-size: 30px;
Width: pixel PX;
Border: 15px solid # ccc;
Border-image: url (images/1.jpg) 70 repeat;
}
<Div id = "border_image">
Set a beautiful frame for me.
</Div>

Iv. Color

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

5. Gradient colors

CSS3 Gradient is divided into linear Gradient (linear) and radial Gradient (radial ).

Parameters:

Usage:

　　

6. Unfinished. To be continued!