css3 UI modification - review

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 is required, the position of the horizontal shadow, negative values ​​are allowed.
　　v-shadow is required, the position of the vertical shadow, negative values ​​are allowed.
　　blur Optional blur distance.
　　spread Optional, the size of the shadow.
　　color Optional, the color of the shadow.
inset is optional, changing the outer shadow (outset) to the content step shadow.
Example:

　　　
　　　

　　　　
　　　

　　 Result: If Figure

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　uga hand in .shadow{width: 300px; height: 150px; margin: 0 auto;

　　　　background: yellow; box-shadow: 4px 4px 3px #000 inset;}　　

　　

　　

Result: As shown in the figure

#2.border-radius

## The element adds a rounded border. grammar: Border-Radius: 1-4 LENGTH | % / 1-4 LENGTH | %;

Note: The order of four values ​​is the order of four values, the upper left corner, upper 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;

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 wealth in indie / 4em >> style>
　　　　　　.radius-test1 { width: 100px; height: 100px;
　　　　　margin: 0 auto; border: 50px solid #cd0000;
　　　　　50%; }
　　　 style >
3.border-image


Element border background
Used to set attributes:
border-image-source The path to the image used in the border
border-image-slice image border Inward offset
Border-image-width The width of the image border
Border-image-outset The amount of the border image area beyond the border
Border-image-repeat Whether the image border is tiled (repeated)
Rounded or stretched by default.
The border divides border-image into 9 parts: 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 located in the four positive directions has no display effect and will not be tiled... Example:

　　　Result: as shown
　　

Example: (tiled round)
}
　　
　　

　　Result: As shown in the figure
　　

　

Example: (tiled repeat)

repeat;}
　　
　　

  Result: as shown

　　

4.

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

linear-gradient

Syntax background: -webkit-linear-gradient(top,#ccc,#000);

Parameters: There are three parameters in total. The first parameter represents the direction of the linear gradient, top is from top to bottom,
　　　　　left means from left to right. If it is defined as left top, it means from the upper left corner to the lower right corner.
　　　　　　　The second and third parameters are the starting point color and the end point color respectively.
　　　　Example:
　　　　　
　　　　

　　　　 Result: As shown in the figure

　　　　　　　　

　　　：You can fill in the angle

red 50px, yellow 200px);}

gradient radial gradient.
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　cred legend_> style>
　　　　　　　.gradient{width:300px; height: 180px;
　　　　　　　　　　　　　　　　　　　　　　　
>
　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 wanted must need should be required
　　　　　　.gradient{width:300px; height: 180px; 　　　　　　background:-webkit-radial-gradient(

　　　　　　　　　　　　　　　& gt;

　　 Result: as shown

Example: The use of keywords at different sizes.
,green,yellow ,black);}
　　　
　　　

　　　　　　　　　　　　　　　　
　　　
　　Repeating radial gradient
　　　The repeating-radial-gradient() function is used to repeat radial gradient　　Example:

　　

　　　　　background: -webkit-repeating-radial-

　　　　　gradient(red, yellow 10%, green 15%);}
　　
　　

Result: As shown in the figure

: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:-10 0px; }
　　　
　　　

　　　

　　　
Result: As shown in the figure

Positioning
Syntax: background-origin: padding-box|border-box|content-box;
The padding-box background image is positioned relative to the padding box.
Border-BOX background image is expensive for
Content-BOX background image relative moon content box to position
Example:
& lt; style & gt ;border:1px solid black;padding:35px;background-image:url('1.png');
                                                                                                                                                                             background-repeat: no-repeat; background-position: left; background-origin: content-box;}


6.background-clip
Specify the drawing area of ​​the background
Value: border-box The background is clipped to the border box
The padding-box background is clipped Cropped to the padding box
　　　content-box The background is clipped to the content box
　　　no-clip: Crop the background outward from the border area.
Example:
x solid #92b901;}
　　
　　

　　 　　　　　　　

More css3 UI modifications - review For related articles, please pay attention to the PHP Chinese website!