Introduction to several new background attributes and text attributes in html5

1. Background image display:

①background-size: specifies the size of the background image;

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

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

value: padding-box (default), content-box, border-box

③background-clip

value: padding-box, content-box, border-box (default)

2. HSLA:

New color attribute;

H: Hue

S: Saturation

L: Brightness

A: Transparency

3. Add new gradient color:

radial-gradient：(*position（deg），color percentage，color percentage)；径向渐变
linear-gradient：(*position，color percentage，color percentage)；线性渐变

4. Added reflection:

-webkit-box-reflect：(direction，offset，color(可线性)，url)

5. MASKS mask and mask:

-webkit-mask：(url，repeat，position，size)

6. Custom font:

@font-face{
　　font-family：'iconfont'；定义字体名
　　src：url(‘iconfont.tff’)；加载字体
}

7. Multi-line text ellipsis: (four in total Line css)

-webkit-box-orient:vertical  =>文本垂直显示
-webkit-line-clamp:3  =>显示 3 行文本
display:webkit-box  =>弹性盒模型
overflow:hidden  =>溢出隐藏

8. Text shadow: (can be used in combination)

text-shadow: offsetX, offsetY, blur distance, color

The above is the detailed content of Introduction to several new background attributes and text attributes in html5. For more information, please follow other related articles on the PHP Chinese website!