Home > Web Front-end > HTML Tutorial > About several new background attributes and text attributes in h5

About several new background attributes and text attributes in h5

一个新手
Release: 2017-10-23 09:37:18
Original
2024 people have browsed it

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);
Copy after login

Radial gradient

linear-gradient:(*position,color percentage,color percentage);
Copy after login

Linear gradient

4. Add reflection:

-webkit-box-reflect:(direction,offset,color(可线性),url)
Copy after login

5. MASKS mask and mask:

-webkit-mask:(url,repeat,position,size)
Copy after login

6. Custom font :

@font-face{
  font-family:'iconfont';定义字体名
  src:url(‘iconfont.tff’);加载字体
}
Copy after login

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  =>溢出隐藏
Copy after login

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

text-shadow:offsetX,offsetY,模糊距离,颜色
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template