[Simplified] Several background attributes and text attributes added by h5,

[Simplified] Several background attributes and text attributes added by h5,

I. background image display:

① Background-size: Specifies the size of the background image;

Value: pixel value, percentage, auto, cover, and contain

② Background-origin: Specifies the starting position of the background image;

Value: padding-box (default), content-box, and border-box

③ Background-clip

Value: padding-box, content-box, and border-box (default)

 

Ii. HSLA:

Adds a color attribute;

H: Color

S: Saturation

L: brightness

A: Transparency

 

3. Add gradient colors:

Radial-gradient :( * position (deg), color percentage, color percentage); radial gradient

Linear-gradient :( * position, color percentage, color percentage); linear gradient

 

4. New reflection:

-Webkit-box-reflect :( direction, offset, color (linear), url)

 

5. MASKS and MASKS:

-Webkit-mask: (url, repeat, position, size)

 

6. Custom fonts:

@ Font-face {

Font-family: 'iconfont'; Define the font name

Src: url ('iconfont. tff'); load font

}

 

7. multiple lines of text ellipsis (four lines in css)

-Webkit-box-orient: vertical => vertical text display

-Webkit-line-clamp:3=> Display3Line Text

Display: webkit-box => elastic box Model

Overflow: hidden => overflow hiding

 

VIII. Text shadow: (can be used together)

Text-shadow: offsetX, offsetY, fuzzy distance, color

 

The above content is incomplete. Some punctuation marks are used in Chinese and will be revised and supplemented later.