CSS3 UI Retouching--review

The 1.box-shadow property adds one or more shadows to the box.
Syntax: Box-shadow:h-shadow v-shadow blur spread color inset
H-shadow must, horizontal shadow position, allow negative values.
V-shadow must, vertical shadow position, allow negative values.
Blur selectable blur distance.
Spread optional, the size of the shadow.
The color is optional and the shadow is colored.
Inset optional to change the outer shadow (outset) to content step shadow.
Example:
<style>
. shadow{width:300px; height:150px; margin:0 Auto;}
. Shadow img{box-shadow:3px 3px 4px #000;}
</style>
<p class= "Shadow" >

</p>
Results:

　　　　　　

　　　　

Example:
<style>
. shadow{width:300px; height:150px; margin:0 auto;
Background:yellow; box-shadow:4px 4px 3px #000 inset;}
</style>
<p class= "Shadow" >
</p>
Results:

　　　　　　

2.border-radius

element to add a rounded border.
Syntax: border-radius:1-4 length | %/1-4 Length | %;
Note: The order of four values is, upper left corner, upper right corner, lower right corner, lower left corner.
Border-radius:2em 1em 4em/0.5em 3em;
Equivalent to:
Border-top-left-radius:2em 0.5em;
Border-top-right-radius:1em 3em;
Border-bottom-right-radius:4em 0.5em;
Border-bottom-left-radius:1em 3em;
Border-radius percent value%
Example:
<style>
. radius-test1 {width:100px; height:100px;
margin:0 Auto; border:50px solid #cd0000;
border-radius:50%; }
</style>
<p class= "Radius-test1" ></p>
Results:

　　　　　　　　

3.border-image
Element Border Background
Used to set properties:
Border-image-source the path of the picture used in the border
Border-image-slice Picture Border Inward offset
Border-image-width width of picture border
Border-image-outset border image area exceeds the amount of border
Border-image-repeat whether the image border is tiled (repeated)
Full (rounded) or stretched (stretched) by default.
The border divides the Border-image into 9 sections: Border-top-image,border-right-image
Border-bottom-image, Border-left-image, Border-top-left-image
Border-top-right-image, Border-bottom-left-image,
Border-bottom-right-image is located in four positive directions without a display effect, not tiled ...
Example:
<style>
. border_image{width:400px; height:100px;border:1em double Orange;border-image:url (1.png) 27;}
</style>
<p class= "Border_image" ></p>
Results:

　　　　

Example: (Tiled round)
<style>
. border_image{width:400px; height:100px;border:1em double Orange;border-image:url (1.png) round;}
</style>
<p class= "Border_image" ></p>
Results:

　　　　

　　

Example: (Tiled repeat)
<style>
. border_image{width:400px; height:100px;border:1em double Orange;border-image:url (1.png) repeat;}
</style>
<p class= "Border_image" ></p>
Results:

　　　　

4.Gradient Gradient

Divided into linear-gradient (linear gradient) and radial-gradient (radial gradient)

Linear-gradient
Grammar background:-webkit-linear-gradient (top, #ccc, #000);
Parameters: Total three parameters The first parameter is expressed as the direction of the linear gradient, top is from the top down,
Left to right if it is defined as top left, it is from the upper-right corner to the bottom-bottom corner.
The second and third parameters are the start and end colors, respectively.
Example:
<style>
. gradient{width:300px; height:180px;
Background:-webkit-linear-gradient (left,
Red 50px, Yellow 200px);}
</style>
<p class= "Gradient" ></p>
Results:

　　　　　　　　　　

Example: You can fill in an angle
<style>
. gradient{width:300px; height:180px;
Background:-webkit-linear-gradient (45deg,
Red 50px, Yellow 200px);}
</style>
<p class= "Gradient" ></p>
Results:

　　　　　　　　　　

Radial-gradient radial gradient.
The shape of the gradient is ellipse (representing the ellipse) Farthest-cormer (indicated to the farthest corner)
Syntax: radial-gradient (red, green, blue);
Example:
<style>
. gradient{width:300px; height:180px;
Background:-webkit-radial-gradient
(Circle, red, yellow, green);}
</style>
<p class= "Gradient" ></p>
Results:

　　　　　　　　

Example: Ellipse ellipse
<style>
. gradient{width:300px; height:180px;
Background:-webkit-radial-gradient (
Ellipse, red, yellow, green);}
</style>
<p class= "Gradient" ></p>
Results:

　　　　　　　　

Example: use of different size keywords.
<style>
. gradient{width:300px; Height:180px;background:
-webkit-radial-gradient (60% 55%, closest-
Side,blue,green,yellow,black);}
</style>
<p class= "Gradient" ></p>
Results:

　　　　　　　　　　

Repeating radial gradient
Repeating-radial-gradient () function for repeating radial gradients
Example:
<style>
. gradient{width:300px; height:180px;
Background:-webkit-repeating-radial-
Gradient (red, yellow 10%, Green 15%);}
</style>
<p class= "Gradient" ></p>
Results:

　　　　　　

Progress bar Small Effect
<style>
. wrap{width:300px;height:25px;
overflow:hidden;border:1px
Solid #000;}
. box{width:400px;height:30px;
background:-webkit-repeating-
Linear-gradient (15deg,green 0,
Green 10px, #fff 10px, #fff
20px); transition:3s;}
. wrap:hover. box{margin-
left:-100px;}
</style>
<p class= "Wrap" >
<p class= "box" ></p>
</p>
Results:

　　　　　　

5. Background-origin
Specifies where the background-position attribute is positioned relative to
Syntax: Background-origin:padding-box|border-box|content-box;
The Padding-box background image is positioned relative to the inner margin box.
Border-box background image too expensive for
Content-box background image relative to month content box to locate
Example:
<style>
. background_origin{width:300px;height:150px;border:1px Solid Black;padding:35px;background-image:url (' 1.png ');
Background-repeat:no-repeat;background-position:left;background-origin:content-box;}
</style>
<p class= "Background_origin" ></p>
Results:

　　　　　　

6.background-clip
Drawing area with specified background
Value: Border-box background is trimmed to frame box
Padding-box background is cropped to the inner margin box
Content-box background is cropped to the content box
No-clip: Crop the background out of the border area.
Example:
<style>
. Background_clip{width:200px;height:50px;padding:50px;background-color:yellow;
background-clip:content-box;border:2px solid #92b901;}
</style>
<p class= "Background_clip" ></p>
Results:

　　　　　　

More CSS3 UI retouching-Review related articles please follow topic.alibabacloud.com!

