CSS knowledge Summary (5) and css knowledge Summary

CSS knowledge Summary (5) and css knowledge Summary
Common CSS styles

 

3. Border Style

1)Border Line

　　　　Border-style: None | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

　　Common border lines:Dotted(Point ),Dashed(Dotted line ),Solid(Solid line ),Double(Dual-line)

　　　　Border-top-styleSet the Upper Frame

　　　　Border-bottom-styleSet the bottom line

　　　　Border-left-styleSet borders on the left

　　　　Border-right-styleSet borders on the right

Example:

/* CSS Code */. style {width: 100px; height: 100px; border-top-style: dotted; border-bottom-style: dashed; border-left-style: solid; border-right-style: double ;}

<! -- HTML code --> <body> <div class = "style"> </div> </body>

Effect:

 

 

2)Border Width

　　　　Border-width: Thin | medium | thick | length

Thin(Border ),Medium(Medium border ),Thick(Rough border ),Length(Numeric px)

　　　　Border-top-widthSet the Upper Border Width

　　　　Border-bottom-widthSet Bottom Border Width

　　　　Border-left-widthSet the width of the Left Border

　　　　Border-right-widthSet the Right Border Width

Example:

/* CSS Code */. width {width: 100px; height: 100px; border-style: solid; border-top-width: thin; border-bottom-width: medium; border-left-width: thick; border-right-width: 10px ;}

<! -- HTML code --> <body> <div class = "width"> </div> </body>

Effect:

 

 

3)Border color

　　　　Border-color: Color

Color: English word, hexadecimal, RGB

　　　　Border-top-colorSet the upper border color

　　　　Border-bottom-colorSet the bottom border color

　　　　Border-left-colorSet the color of the Left Border

　　　　Border-right-colorSet the right border color

Example:

/* CSS Code */. color {width: 100px; height: 100px; border-style: solid; border-color: 5px; border-top-color: yellow; border-bottom-color: green; border-left-color: # f00000; border-right-color: rgb (0, 0 );}

<! -- HTML code --> <body> <div class = "color"> </div> </body>

Effect:

 

 

4)Abbreviation of border Style

　　　　Border: Border-width border-style border-color

Example:

div {     width:100px;     height:100px;    border-width:1px;     border-style:solid;     border-color:#FF0000; }

Abbreviation:

div {    width:100px;     height:100px;     border:1px solid #FF0000;}

5)Rounded Corner Effect

　　　　Border-radius: Length | percentage

Add a rounded table box to the element. There are several situations:

1. All corners use rounded corners with a radius of 10 PX.

Div {border-radius: 10px ;}

 

2. The four radius values are in the upper left corner, the upper right corner, the lower right corner, and the lower left corner, clockwise.

Div {border-radius: 10px 20px 30px 40px ;}

 

3. Set the horizontal and vertical radius of each angle, separated by a slash

Div {border-radius: 40px/20px ;}

 

4. Circle

Div {border-radius: 50%}

 

　　　　　　

6)Border Image

Border-image

Border style is filled with images

After border-image is set, border-style is not displayed.

 

7)Box shadow

　　　　Box-shadow: None | shadow

Box-shadow: horizontal offset vertical offset [shadow blur radius] [shadow extended radius] [shadow color] [Projection mode];

The offset between the horizontal and vertical fields is required, and the rest shows different effects.

 

1. General effects of external shadows:

/* CSS Code */. outset {width: 100px; height: 100px; background: #000; box-shadow: 5px 5px # ccc ;}

<! -- HTML code --> <body> <div class = "outset"> </div> </body>

 

 

2. blur the outer shadow:

/* CSS Code */. outset-blur {width: 100px; height: 100px; background: #000; box-shadow: 5px 5px 10px #000 ;}

<! -- HTML code --> <body> <div class = "outset-blur"> </div> </body>

 

 

3. Blur extension effects of external shadows:

/* CSS Code */. outset-extension {width: 100px; height: 100px; background: #000; box-shadow: 5px 5px 10px 10px # f00 ;}

<! -- HTML code --> <body> <div class = "outset-extension"> </div> </body>

 

 

4. General effects of Inner Shadow:

/* CSS Code */. inset {width: 100px; height: 100px; background: # ccc; box-shadow: 5px 5px #000 inset ;}

<! -- HTML code --> <body> <div class = "inset"> </div> </body>

 

 

5. blur the Inner Shadow:

/* CSS Code */. inset-blur {width: 100px; height: 100px; background: # ccc; box-shadow: 5px 5px 10px #000 inset ;}

<! -- HTML code --> <body> <div class = "inset-blur"> </div> </body>

 

 

* In the next blog, we will talk about the effects of border styles and box shadows applied to webpages.