CSS3 series three (styles related to background borders, deformation processing, animation effects)_html/css_WEB-ITnose

New attributes related to background

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

Use background-clip to modify the display range of the background. If it is set to border-box, the background range includes the border area. If it is set to padding-box, it does not include the border but includes the padding area. If set to content-box, the background only contains the content area

background-origin attribute: specifies the starting point for drawing the background image. Its attribute value is the same as background-clip, which means you can pass It is specified to draw starting from the upper left corner of the border or from the upper left corner of the content

(It should be noted that although background-clip can be specified as padding-box, it can still be specified through the background-origin attribute Specify as border-box to specify drawing from the upper left corner of the border)

background-size: Specify the size of the background image; (1. If you want to maintain the image aspect ratio, you can set the image width and height At the same time, set another parameter to auto 2. When specifying width and height, you can use percentage values ​​as parameters)

CSS3 allows users to set multiple backgrounds for an element (Multiple Backgrounds) (That is, specifying multiple background images for one 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 is a special explanation that allows multiple specifications and is combined with multiple The attributes used together with image files are as follows:

Using border-radius to draw rounded borders. I believe everyone is very familiar with it, so I won’t go into details. It can also be separated like border. Write as follows:

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

border-image specifies the border image

The usage is very simple

The specific meaning of ABCD above is as shown in the figure below:

If we specify these four parameters in the border-image attribute value, the browser uses it for the border How to segment the image, as shown below:

The specific meaning is

Similarly we can specify the border-image attribute Border width

Not only can you specify the border width, but you can also specify how the image is displayed

Detailed introduction to the CSS3 transform function

The syntax of CSS3 transform is relatively simple, but currently each browser only supports its own method.

-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 reason is to consider future compatibility, which can reduce maintenance costs.

Let’s talk about it in detail

1. scale implements the scaling of text or images, and specifies the scaling ratio in the parameters
2. skew implements the tilting of text or images , specify the tilt angle in the horizontal direction and the tilt angle in the vertical direction in the parameters (if only one parameter is used for the two parameters, only the tilt will be performed in the horizontal direction and no processing will be done in the vertical direction)
3. Move the text or image in the translate direction, specify the moving distance in the horizontal direction and the moving distance in the vertical direction in the parameters (the same as skew, if only one parameter is specified, no processing will be done in the vertical direction)

When using the transform method to transform text or images, the center point of the element is used as the reference point. Use the transform-origin attribute to change the reference point of the transformation

in css3 Animation

For simple changes, CSS3 can achieve dynamic transition effects through the transition attribute.

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

Of course you can also use the transitions function to smooth multiple attribute values ​​at the same time

More complex animations are currently available in webkit On the platform, this 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);    }}

At the same time, like transitions, if you want to animate multiple attributes changing at the same time, you only need to specify these attribute values ​​​​in each key frame at the same time

Let’s see what methods are available to implement animation

I would like to emphasize here that js can easily get the animation end message by listening to the webkitTransitionEnd event, so as to do the corresponding Operations