Css3 common attribute phenotype, css3 phenotype

Css3 common attribute phenotype, css3 phenotype

The use of css3 has been distributed on various websites. Its use is of great help to front-end developers. For example, the previous rounded rectangle needs to be completed using background images, now you only need to use border-radius: 5px; to make the effect of the rounded border. Today, we will record some common attributes of css3.

Source of this article: www.liteng.org If You Need To reprint it, please indicate the source. Otherwise, legal liability will be held accountable.

The copyright belongs to the author and the blog site.

Box properties:Border rounded corner: radius, border shadow: box-shadow

Border: border-radius: top-left top-right bottom-left;

Here we will describe the sequence of Box border style design.

border-radius:10px;Border-top-left-radius: 10px;

border-top-left-radius:10px;

Box shadow box-shadow:H-shadow V-shadow BlurColor inset/outset

Box-shadow: 5px 5px 5px red;

The default value is the outer shadow outset.

box-shadow:5px 5px 5px red;

Box-shadow: 5px 5px 5px red inset;

box-shadow:5px 5px 5px red inset;

Of course, you can set multiple shadows by adding ',' to the backend ','.

Box-shadow: 5px 5px 5px red inset,-5px-5px 5px green;

box-shadow:5px 5px 5px red inset,-5px -5px 5px green;

Convert 2D/3D: transform: rotate, scale, skew

Browser support: IE10, firfox, and opera

To achieve compatibility between browsers, use the following method:

-ms-transform:rotate(45deg); /* IE 9 */-moz-transform:rotate(45deg); /* Firefox */-webkit-transform:rotate(45deg); /* Safari and Chrome */-o-transform:rotate(45deg); /* Opera */transform:rotate(45deg);

Currently, the range is only 2d.

Transform: rotate (Xdeg) defines Angle Rotation

Transform: rotate (0deg) transform: rotate (45deg)

transform:rotate(45deg)

Transform: rotate (Xdeg) defines Angle Rotation

Transform: scale (x ):The scaling parameter is a multiple of the scaling.

Transform: scale (1, 1.5)

Note: it refers to scaling in the x and y directions of the original base.

Skew () method

Transform: skew (0deg, 45deg)

The skew () method is used to flip an element to a given angle based on the given horizontal line (X axis) and vertical line (Y axis) parameters:

Animation of css3: animate

Animation: myanimation 5S linear infinite

Animation: myanimation 5S linear infinite; (specified frame name, execution interval, effect, number of executions)

<Div> Source: www.liteng.org. If you need to reprint it, please indicate the source. Otherwise, legal liability will be held accountable.
The copyright belongs to the author and the blog site.
Animation execution effect: linear: uniform speed, uniform: Uniform Acceleration, slow-in: slow start, slow-out: Slow end, slow-in-out: slow start and slow end.
Address: http://liteng.org/node/56
More effects: url: http://2.liteng.sinaapp.com/HTML5/index.html
Next, we will record the usage of the css3 selector.