The fourth day of CSS depth

First, box style--border:

1. Border-width Border Width

such as: div{width:200px;height:100px;border-width:1px;}

2.border-color Border Color

such as: Div{width:200px;height:100px;border-color: #ccc;}

3.border-style Border Line

such as: Div{width:200px;height:100px;border-style:solid}

The above three can be written as an abbreviated form: div{width200px;height:100px;border:1px solid #ccc;}

4.border-radius rounded corners effect

such as: Div{width:200px;height:100px;background-color: #000; border-radius:10px; The top-left, top-right, bottom-right, and bottom-left corners have a rounded effect of 10px, which is a circle when 50%.

Extended:

5.border-image Border Picture

such as: div{border:10px solid Gray;border-image:url (...) 10/10px;}

6.box-shadow Box Shadow

such as:. Outset {box-shadow:5px 5px rgba (0, 0, 0,. 6);} /* External Shadow general Effect */

. outset-blur{box-shadow:5px 5px 5px 10px rgba (0, 0, 0,. 6);} /* Outer shadow blur epitaxial effect */

.   inset {box-shadow:2px 2px 5px 1px rgba (0, 0, 0,. 6) inset;} /* Inner Shadow Effect */

combining internal and external shadows, Pseudo-class hover available write down the button to press the sunken effect

Second, paragraph style:

1.line-height Line Height

such as: p{line-height:27px;} can also be used as a percentage, such as 150%

2.text-indent paragraph Indent

such as: P{TEXT-INDENT:2EM;}

3.text-align: paragraph alignment

such as: P{text-align:right;}

4.letter-spacing text Spacing

such as: p{letter-spaacing:5px;} Note: Use word-spacing between English words

5.text-overflow: Text Overflow

such as: div,input{

Overflow:hidden; /* Condition 1: Out of part hidden */

white-space:nowrap;/* Condition 2: Force all text to appear in the same line */

text-overflow:ellipsis;/* out-of-section display ... */

}

6.word-wrap: Paragraph Wrapping

such as: P{word-wrap:break-word;}

Third, the background style:

1.background-color background Color

such as: Body{background-color: #ccc;}

Other:

1.1 Colors of Rgba

such as: Div{width:200px;height:100px;background-color:rgba (255,0,0,.5);} Note: A is a transparent parameter, and the value is between 0~1 and not negative.

1.2 Gradient Colors

such as: Div{background-image:linear-gradoent (to left,red 30%,blue);}

2.background-image background image

such as: Body{background-image:url (...);}

3.background-repeat background Tiling method

such as: body{background-repeat:no-repeat;}

4.background-position Background Positioning

such as: Body{background-position:left Bottom;}

Top 2 , 3 , 4 points can be written in abbreviated mode: Body{background:url (...) no-repeat left bottom;}

The fourth day of CSS depth