New UI solution of CSS3 and UI solution of CSS3

New UI solution of CSS3 and UI solution of CSS3

Border-radius rounded corner

The parameter value can be pixel or percentage.
The range of a parameter is four.
When two parameters are used, the range is upper left, lower right, and lower right.
When the three parameters are used, the range is top left, top right, bottom left, and bottom right.
When the four parameters are used, the range is top left, top right, bottom right, and bottom left.
If '/' is included in the parameter, for example, 100px/150px, it indicates the X axis radius/Y axis radius.

-Border-image border background

-Border-image: the way in which the left and right sides of an image are cut and the left and right sides of an image are arranged;
Border-image-repeat:; border arrangement
Round tile has the same effect as repeat
Repeat already exists.
Stretch default
In-webkit-, the intermediate part is automatically added.

-Moz-border-left-colors: border multi-color processing

Example:-moz-border-left-colors: red blue yellow;

Note: currently, it is only effective in Firefox

-Webkit-repeating-linear-gradient tile gradient

-Linear-gradient: linear gradient

Linear gradient is not supported for IE9 and earlier

Filter processing:
Filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = 'red', endColorstr = 'blue', GradientType = '0 ');
Compatible with IE6
StartColorstr start color
EndColorstr end color
GradientType 1 is from left-> right 0 is from top-> bottom

-Radial-gradient: direction, keyword(Optional), Color;

Radial Gradient keyword

Closest-size gradient to the nearest end
Closest-corner gradient to the nearest corner
Farthest-corner gradient to the farthest corner
Contain (the element contains the gradient so that it does not go beyond the element)
Cover overwrite (fill the entire element with a gradient)

Background-size: background size

Background-size: The contain include (zoom out) element contains the background image (the background image is just placed in the box)
Cover overwrite (zoom) background image after proportional zoom in, fill in the element

Background-origin: background image origin settings

Background-origin: border-box; calculated from the border
Content-box calculation starts from the content
Padding-box starts from inner whitelist (default)
Background-clip: crop the background

Background-clip: border-box; default
Solve the Problem of displaying a background image with a translucent border:
Padding-box remove background other than padding
Content-box remove background other than content
-Webkit-background-clip: text; remove background other than text (currently Firefox is not applicable)