CSS3 Series three (related to background border style, warp processing, animation effect)

New properties related to the background

Everyone knows that in an HTML page, elements are made up of the following parts

Use Background-clip to modify the display range of the background, if set to Border-box, the background range contains the bounding area, and if set to Padding-box does not contain a border, contains the padding area. If set to Content-box, the background contains only the content area

Background-origin Property: Specifies the starting point for drawing the background image, and its property value is the same as background-clip, which means that you can draw from the top-left corner of the bounding box or start from the upper-left corner of the content by specifying it.

(Note that although you can specify Padding-box through Background-clip, you can still specify the Background-origin property as the Border-box to start drawing from the upper-left corner of the border)

Background-size: Specifies the size of the background image, (1, if you want to maintain the image aspect ratio, you can set the image width and height, while setting another parameter to Auto 2, when the width and height of the specified, you can use the value of the percentage as a parameter)

CSS3 allows the user to set multiple backgrounds (multiple backgrounds) for an element (that is, to specify multiple background images for an element, separated by commas)

Background:url (front.png) repeat-x 300% 0, url (mid.png) repeat-x 70% 0, url (back.gif) repeat-x-10% 0;

Here are some examples of properties that allow multiple designations to be leveraged with multiple image files:

Using Border-radius to draw rounded borders I believe that we are very familiar with, not tired of the statement, it is like border can also be written separately, as follows:

            border-top-left-radius:1px;            border-top-right-radius:2px;            border-bottom-left-radius:3px;            border-bottom-right-radius:4px;

Border-image specifying border images

The way to use it is simple

Where the specific meanings of the above ABCD are as follows:

If we specify these four parameters in the Border-image property value, how does the browser split the image used by the border, as shown in:

The specific meaning is

Also we can specify the border width for the Border-image property

You can specify not only the width of the border, but also how the image is displayed

CSS3 Transform function Specific introduction

The syntax of CSS3 transform is relatively simple, but currently browsers only support their own methods.

-webkit-transform:rotate (10deg),-moz-transform:rotate (10deg),-o-transform:rotate (10deg), Transform:rotate (10deg );

Note: The last line, although not currently supported by all browsers, is very important. The main consideration is future compatibility, which can make maintenance cost lower.

Here's a concrete talk.

1. Scale implements the scaling of text or images, specifying magnification in the parameters
2. Skew to skew the text or image, specifying the tilt angle in the horizontal direction and the tilt angle in the vertical direction in the parameter (if only one parameter is used for two parameters, the tilt is only in the horizontal direction and no processing is done vertically)
3. Translate move the text or image in the direction of the parameter, specifying the moving distance in the horizontal direction and moving distance in the vertical direction (as with skew, if only one parameter is specified, no processing is done vertically)

When using the transform method to deform text or images, the center point of the element is used as the Datum point, and the Transform-origin property can change the deformed datum point.

Animations in the CSS3

For simple changes, CSS3 can achieve the effect of dynamic transitions through the transition attribute.

-webkit-transition:color 1s ease;-moz-transition:all 0.5s linear 2s;

Of course you can also use the transitions feature to smooth over multiple property values at the same time

More complex animations, currently on the WebKit platform, can be done through keyframes.

#div1 {    -webkit-animation-name: key1;} @-webkit-keyframes Key1 {    from{        color: red;         -webkit-transform:rotatey (0);    }     to {        color: yellow;         -webkit-transform:rotatey (40deg);    } }

Also, like transitions, if you want to implement animations that change multiple properties at the same time, you just need to specify these property values in each keyframe.

See how animations are implemented

Here, JS can listen to the Webkittransitionend event, you can easily get the end of the animation message, so that the corresponding operation

CSS3 Series three (related to background border style, warp processing, animation effects)