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