Heim > Web-Frontend > js-Tutorial > CSS3-Ränder und -Hintergründe sowie Texteffekte

CSS3-Ränder und -Hintergründe sowie Texteffekte

php中世界最好的语言
Freigeben: 2018-03-19 10:26:16
Original
2058 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Rahmen-, Hintergrund- und Texteffekte von CSS3 vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Rahmen-, Hintergrund- und Texteffekte von CSS3? .

Spielen Sie mit CSS3-Rändern, Hintergründen und Texteffekten

1. Rahmen

Box-Shadow

box-shadow: h-shadow v-shadow blur spread color inset(ontset);
//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 spread:阴影的尺寸 color:阴影的颜色 inset(outset):内部阴影/外部阴影 
box-shadow: 5px 0 5px 0 #000 outset;//效果图如下
Nach dem Login kopieren

Randradius abgerundeter Ecken

border-radius: 1-4 length|% / 1-4 length|%;
//第一个参数:水平半径 第二个参数:垂直半径
border-radius: 50%/20%;//效果图如下
Nach dem Login kopieren
durch Festlegen verschiedener Ränder Abgerundete Ecken können eine Vielzahl von Rahmenrahmen realisieren

Randbild

border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
//边框图片url边框内偏移 边框宽度 边框图像区域超出边框的量 边框平铺(repeated)、铺满(rounded)、拉伸(stretched)
Nach dem Login kopieren

2. Hintergrund

HintergrundgrößeGibt die Größe des Hintergrundbilds an

background-size: length|percentage|cover|contain;
//length:设置背景图片宽度和高度 percentage:根据父元素百分比设置背景图片宽度和高度 cover:背景图像扩展至足够大以使背景图像完全覆盖背景区域 contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
Nach dem Login kopieren

HintergrundclipGibt den „Zeichnungs“-Bereich des Hintergrunds an

background-clip: border-box|padding-box|content-box;
Nach dem Login kopieren

background-origin Gibt den „Positionierungs“-Bereich des Hintergrundbildes an

background-origin: padding-box|border-box|content-box;
Nach dem Login kopieren

PS: Achten Sie auf den Unterschied zwischen Hintergrundursprung und Hintergrundclip, einer ist der Positionierungsbereich, einer ist der Zeichenbereich

3. Textschatten

Textschatten Textschatten Effekt

<span style="color: #800000">text-shadow: h-shadow v-shadow blur color;<br>//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 color:阴影颜色<br>text-shadow: 5px 5px 3px #000;//效果图如下</span>
Nach dem Login kopieren

Wortumbruch ermöglicht das Teilen langer unteilbarer Wörter und den Umbruch in die nächste Zeile

<span style="color: #800000">word-wrap: normal|break-word;<br>//normal:只在允许的断字点换行 break-word:在长单词或url地址内部换行</span>
Nach dem Login kopieren
Wortumbruch legt Regeln für den Zeilenumbruch für nicht-chinesischen, japanischen und koreanischen Text fest.

word-break: normal|break-all|keep-all;
// normal:使用浏览器默认换行规则  break-all:允许在单词内换行 keep-all:只能在半角空格或连字符处换行
Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So bedienen Sie das ungeordnete Listenattribut in JS

Der Text der Dropdown-Liste „Safari Browser Select“ ist zu lang und umschließt die Lösung nicht

Das obige ist der detaillierte Inhalt vonCSS3-Ränder und -Hintergründe sowie Texteffekte. 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