CSS properties define text decoration border effect background decoration

First, CSS Property definition
1. CSS Color Presentation method "Focus"
RGB (red-green-blue 3 color channel strength value 0-255) RGB (0,0,0)
RGBA (Alpha A is a transparency value of 0-1) Rgba (123,123,123,0)

Hsl
Hsla (H: Hue, angle value on the color ring (ppt78 page), 0-360
S: Saturation, 0-100%
L: Lightness, 0-100%
A: Opacity, decimal between 0-1)
Color:hsla (30,100%,50%,0.8);

Hexadecimal (General format #ffffff) (Letter range from A-f, number from 0-9)

Opacity:0-1 the opacity level effect of the set element for the whole
Background:transparent; Fully Transparent

Summarize:
Hex (#ffffff) compatibility is good
Use Rgba and Hsla when you need to make a translucent background or text effect
The Opacity property affects all parts of the object, that is, all translucent

Second, CSS text decoration "Focus"
font-family Font Name
Font-size size
Font-weight thickness
Color colors

Line-height Line Height
letter-spacing Character Spacing
white-space:nowrap; Force a row to display
Word-break:break-word; wrap a line

@font-face Embedded fonts (Network absolute address)
Font (family size weight @font-face)
@font-face is able to load the server-side font file, allowing the browser to display fonts that are not installed on the user's computer.
@font-face {
font-family: Font name;
Src:url () the relative or absolute path of the font file on the server;
}

Text-decoration underlined underline no
Text-align Horizontal Alignment
Text-indent indentation of the first line in a text block
Text-overflow text Overflow
Text-shadow Text Shadow Effect

A simple way to center text vertically
#a {height:100px;line-height:100px;}

Text-shadow to set the shadow effect of text
text-shadow:2px 2px 0 red;
Horizontal vertical Blur Color

Text-overflow sets whether to use an ellipsis tag (...). ) indicates an overflow of text within the object.
White-space:nowrap text is displayed in one line

p{width:200px;
height:40px;
Overflow:hidden;
Text-overflow:ellipsis; how to display
}

A line of text overflows the ellipsis tag (...). ）

Multiline text overflow ellipsis mark (... ）

Third, CSS border effect "focus"
Border
Border-top
Border-right
Border-bottom
Border-left
Border-style Border Type Dashed solid
Border-width
Border-color

Border-radius round Corners
Box-shadow projection
Outline contour lines outside the border
Border (top bottom right left style (type) width color radius (fillet))

Border-style border type dashed dashed solid solid line

border:1px dotted #ffff30;/* Recommended notation */
border-top:1px solid #f90; /* Recommended notation */

Rounded corners Border-radius "Focus"
border-radius:50%;

Projection Box-shadow (compatible)
Box-shadow: #000 5px 5px 10px;

Firefox is supported via private attribute-moz-box-shadow.
Chrome supports-webkit-box-shadow with private properties.
Compatible wording
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;

Summarize:
The fillet, projection, and Contour properties are CSS3 properties that are not supported by the lower version of the browser and should be aware of the target browser
General border properties are well-compatible

4, CSS background decoration "Focus"
Background
Background-color
Background-image
Background-repeat
Background-position
Background-size
Background-attachment define how the background picture moves with the scroll axis

Attention:
Background image takes precedence over background color display
The default values for each of the following properties are:
Background-color:transparent;
Background-image:none;
Background-repeat:repeat;
Background-position:left top;

Expand:
Gradient effect implementation (poor compatibility, only understanding):
Linear gradient (linear-gradient)-down/up/left/right/diagonal
Radial gradients (radial-gradient)-defined by their centers
Background:linear-gradient (to bottom, #ff3dd6, #00A0D9, #1A00FF);
Background:radial-gradient (#ff3dd6, #1A00FF, #00FFDB);
Http://www.runoob.com/css3/css3-gradients.html

Background-image (None)
Background image takes precedence over background color display

background-attachment {Fixed,scroll} defines how the background picture moves with the scroll axis
Background-repeat (repeat) {repeat-x,repeat-y,no-repeat}
Background-position (left top) background negative position tips

Background image matching:
Background-size
Background-size:auto; (default value)
Background-size:contain; (The background image is always included in the container, such that the background image is equal to the width or height of the container.) ）
Background-size:cover; (The background image is more likely to be out of the container than to zoom to the full overlay container.) ）
background-size:300px 400px; (Custom background image size)

CSS properties define text decoration border effect background decoration