About several new background attributes and text attributes in h5

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. New gradient color:

radial-gradient：(*position（deg），color percentage，color percentage)；

Radial gradient

linear-gradient：(*position，color percentage，color percentage)；

Linear gradient

4. Add 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 lines of css in total)

-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，模糊距离，颜色

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