Heim > Artikel > Web-Frontend > Wie erreicht man den Drop-Cap-Effekt in CSS? Pseudoelement + Floating-Effekt (Codebeispiel)
Wie erreicht man den Drop-Cap-Effekt in CSS? Pseudoelement + Floating-Effekt (Codebeispiel)
- 青灯夜游Original
- 2018-10-12 11:50:175190Durchsuche
In Word-Dokumenten gibt es eine Drop-Cap-Funktion, die beim Layout von Artikeln verwendet werden kann. Manchmal kann sie dem Artikel viel Farbe verleihen. Kann CSS also einen solchen Effekt erzielen? In diesem Artikel erfahren Sie, wie CSS den Drop-Cap-Effekt erzielt, damit Sie verstehen, wie Sie CSS-Pseudoelemente + Floating verwenden, um den Drop-Cap-Effekt zu erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
In CSS kann der Drop-Cap-Effekt durch das Pseudoelement::first-letter erreicht werden. Das Implementierungsprinzip ist sehr einfach: Setzen Sie den Schriftgrößenwert des ersten Zeichens auf einen größeren Wert und implementieren Sie ihn dann mit Float.
Anhand eines einfachen Codebeispiels sehen wir, wie CSS den Drop-Cap-Effekt erzielt.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首字下沉</title>
<style>
p::first-letter{
color: #c69c6d;
font-size: 2em;
float:left;
margin: 0 .2em 0 0;
}
</style>
</head>
<body>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
</body>
</html>Rendering:
 "153931565870494Wie erreicht man den Drop-Cap-Effekt in CSS? Pseudoelement + Floating-Effekt (Codebeispiel)")
Im obigen Beispiel wird die Initiale aller Absätze entfernt, wenn Sie nur den Initialeneffekt von a erzielen müssen bestimmter Absatz, der auch mit anderen Selektoren implementiert werden muss. Hier werfen wir einen Blick auf die Implementierung der Drop-Cap im ersten Absatz:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首字下沉</title>
<style>
p:first-child::first-letter{
color: #c69c6d;
font-size: 2em;
float:left;
margin: 0 .2em 0 0;
}
</style>
</head>
<body>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
</body>
</html>Rendering:
Zusammenfassung: Das Obige ist der gesamte Inhalt von Ich hoffe, dass dieser Artikel für das Studium aller hilfreich sein kann. Weitere verwandte Tutorials finden Sie unter Video-Tutorial zu CSS-Grundlagen !
Verwandte Empfehlungen:
PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung
Das obige ist der detaillierte Inhalt vonWie erreicht man den Drop-Cap-Effekt in CSS? Pseudoelement + Floating-Effekt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!