CSS3 's new UI scheme

Border-radius rounded Corners

Parameter can be a pixel or a percentage
When a parameter is scoped to Four Corners
When two parameters are scoped to upper left, lower right, lower right
When three parameters are scoped to top left upper right upper left bottom right
When four parameters are scoped to upper right, upper right, lower left
When there is '/' in the parameter, for example 100px/150px: X-Axis radius/y axis radius

-border-image Border Background

-border-image: Picture link picture cutting up and down picture cutting left and right border arrangement way;
Border-image-repeat:; border arrangement
Round tile is the same as the repeat effect
Repeat repeat
Stretch stretch Default
In-webkit-, the middle part is automatically mended.

-moz-border-left-colors: Border Multi-color processing

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

Note: Currently only works in Firefox

-webkit-repeating-linear-gradient tiling gradients

-linear-gradient: Linear gradient

Linear gradients not supported under IE9 and 9

Processing with filters:
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' red ', endcolorstr= ' Blue ', gradienttype= ' 0 ');
can be compatible to IE6
StartColorStr Start Color
EndColorStr End Color
GradientType 1 for from Left->right 0 for from Top->bottom

-radial-gradient: direction, keywords (optional), color;

Radial gradient keyword

Closest-size gradient to the nearest end
Closest-corner gradient to the nearest corner
Farthest-corner to the far corner gradient
Contain contains (elements that contain them so that their gradients do not go beyond the elements)
Cover overlay (The gradient fills the entire element)

Background-size: Background size

Background-size:contain contains (shrinks) the element containing the background map (the background map is just put into the box)
Cover overlay (enlarge) the background image, etc, fills up the element after zooming in

Background-origin: Background map origin settings

Background-origin:border-box; Start calculation from the border
Content-box Starting from content
Padding-box starting from inner filler (default)
Background-clip: Background Clipping

Background-clip:border-box; Default
Solve the problem of background picture with semi-transparent border:
Padding-box removal of background outside padding
Content-box removal of background outside content
-webkit-background-clip:text; Remove background from text (not currently available for Firefox)

CSS3 's new UI scheme