Css3 UI modification-review, css3ui modification Review

Css3 UI modification-review, css3ui modification Review

1. The box-shadow attribute 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. A negative value is allowed.
V-shadow is required. It is the vertical shadow position. A negative value is allowed.
Blur supports fuzzy distance.
(Optional) Size of the shadow.
Optional. color of the shadow.
(Optional) inset. Change the external shadow (outset) to the content step shadow.
Example:
<Style>
. Shadow {width: 300px; height: 150px; margin: 0 auto ;}
. Shadow img {box-shadow: 3px 3px 4px #000 ;}
</Style>
<Div class = "shadow">

</Div>
Result:

　　　　　　

　　　　

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

　　　　　　

2. border-radius

Add a rounded border to the element.
Syntax: border-radius: 1-4 length | %/1-4 length | %;
Note: The order of the four values is: upper left corner, upper right corner, lower right corner, and lower left corner.
Border-radius: 2em 1em 4em/0.5em 3em;
It is equivalent:
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 supports percentage value %
Example:
<Style>
. Radius-test1 {width: 100px; height: 100px;
Margin: 0 auto; border: 50px solid # cd0000;
Border-radius: 50% ;}
</Style>
<Div class = "radius-test1"> </div>
Result:

　　　　　　　　

3. border-image
Element border background
Used to set attributes:
Border-image-source Path of the image used in the border
Border-image-slice image border offset inward
Border-image-width: border width of the image
Border-image-outset border image area beyond the border
Border-image-repeat whether the image border is tiled (repeated)
Rounded or stretched by default.
The border divides the border-image into nine 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 is located in the four positive directions and does not show the effect. It will not tile...
Example:
<Style>
. Border_image {width: 400px; height: 100px; border: 1em double orange; border-image: url(1.png) 27 ;}
</Style>
<Div class = "border_image"> </div>
Result:

　　　　

Example: (tiled round)
<Style>
. Border_image {width: 400px; height: 100px; border: 1em double orange; border-image: url(1.png) 27 round ;}
</Style>
<Div class = "border_image"> </div>
Result:

　　　　

　　

Example: (tiled repeat)
<Style>
. Border_image {width: 400px; height: 100px; border: 1em double orange; border-image: url(1.png) 27 repeat ;}
</Style>
<Div class = "border_image"> </div>
Result:

　　　　

4.Gradient

Linear-gradient (linear gradient) and radial-gradient (radial gradient)

Linear-gradient
Syntax background:-webkit-linear-gradient (top, # ccc, #000 );
Parameters: a total of three parameters. The first parameter indicates the direction of the linear gradient, top is from top to bottom,
Left is defined as left top from left to right.
The second and third parameters are the start color and end color respectively.
Example:
<Style>
. Gradient {width: 300px; height: 180px;
Background:-webkit-linear-gradient (left,
Red 50px, yellow 200px );}
</Style>
<Div class = "gradient"> </div>
Result:

　　　　　　　　　　

Example: Enter the angle
<Style>
. Gradient {width: 300px; height: 180px;
Background:-webkit-linear-gradient (45deg,
Red 50px, yellow 200px );}
</Style>
<Div class = "gradient"> </div>
Result:

　　　　　　　　　　

Radial-gradient radial gradient.
The gradient shape is ellipse (representing the elliptical shape) farthest-cormer (representing 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>
<Div class = "gradient"> </div>
Result:

　　　　　　　　

Example: ellipse elliptic
<Style>
. Gradient {width: 300px; height: 180px;
Background:-webkit-radial-gradient (
Ellipse, red, yellow, green );}
</Style>
<Div class = "gradient"> </div>
Result:

　　　　　　　　

Example: Use keywords of different sizes.
<Style>
. Gradient {width: 300px; height: 180px; background:
-Webkit-radial-gradient (60% 55%, closest-
Side, blue, green, yellow, black );}
</Style>
<Div class = "gradient"> </div>
Result:

　　　　　　　　　　

Repeated radial gradient
The repeating-radial-gradient () function is used to repeat the radial gradient.
Example:
<Style>
. Gradient {width: 300px; height: 180px;
Background:-webkit-repeating-radial-
Gradient (red, yellow 10%, green 15% );}
</Style>
<Div class = "gradient"> </div>
Result:

　　　　　　

Small progress bar 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: 3 s ;}
. Wrap: hover. box {margin-
Left:-100px ;}
</Style>
<Div class = "wrap">
<Div class = "box"> </div>
</Div>
Result:

　　　　　　

5. Background-origin
Specifies the position relative to the background-position attribute
Syntax: background-origin: padding-box | border-box | content-box;
Position the padding-box background image relative to the padding box.
Border-box background images are too expensive
Content-box background image is located relative to the monthly content frame
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>
<Div class = "background_origin"> </div>
Result:

　　　　　　

6.Background-clip
Specifies the plotting area of the background.
Value: the border-box background is dropped to the border box.
Padding-box background is cropped to the padding box
The content-box background is cropped to the content box.
No-clip: crop the background from 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>
<Div class = "background_clip"> </div>
Result:

　　　　　　

Demo download https://github.com/ningmengxs/css3.git