Heim > Web-Frontend > H5-Tutorial > Hauptteil

Einführung in mehrere neue Hintergrundattribute und Textattribute in HTML5

黄舟
Freigeben: 2017-10-23 10:11:54
Original
1858 Leute haben es durchsucht

1. Hintergrundbildanzeige:

①background-size: gibt die Größe des Hintergrundbilds an;

Wert: Pixelwert, Prozentsatz, Auto, Cover, enthalten

②background -origin: Gibt die Startposition des Hintergrundbilds an;

Wert: padding-box (Standard), content-box, border-box

③background-clip

Wert: padding-box, content-box, border-box (Standard)

2. HSLA:

Neues Farbattribut;

H: Farbton

S: Sättigung

L: Helligkeit

A: Transparenz

3. Neue Verlaufsfarbe:

radial-gradient:(*position(deg),color percentage,color percentage);径向渐变
linear-gradient:(*position,color percentage,color percentage);线性渐变
Nach dem Login kopieren

4. Neue Reflexion:

-webkit-box-reflect:(direction,offset,color(可线性),url)
Nach dem Login kopieren

5. MASKEN Maske und Maske:

-webkit-mask:(url,repeat,position,size)
Nach dem Login kopieren

6. Benutzerdefinierte Schriftart:

@font-face{
  font-family:'iconfont';定义字体名
  src:url(‘iconfont.tff’);加载字体
}
Nach dem Login kopieren

7. Mehrzeiliger Text Auslassungspunkte: (insgesamt vier Zeilen CSS)

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

8. Textschatten: (kann in Kombination verwendet werden)

Textschatten: OffsetX, OffsetY , Unschärfeabstand, Farbe

Das obige ist der detaillierte Inhalt vonEinführung in mehrere neue Hintergrundattribute und Textattribute in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage