CSS-Beispielcode zum Zeichnen eines Lutschers

Hintergrund: Machen Sie jeden Tag ein wenig Fortschritte, sammeln Sie ein wenig mehr, und Sie werden immer besser

Code:

<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<Titel>Lutscher</Titel>
    <h3>Zeichnen Sie einen Lutscher mit CSS</h3>

    <p>Voraussetzungen:</p>
    <p>1: Der Text in der Mitte des Lollis ist horizontal zentriert</p>
    <p>2: Nicht weniger als drei Farbschichten</p>
<Stil>
 .runden{
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: #e5e7e9;
    Position: relativ;
    Textausrichtung: zentriert;
    Rand: 100px;
    Schriftart: kursiv fett 17px/100px Arial, serifenlos;
    Kastenschatten: 
        0 0 0 10px #4286b4,
        0 0 0 20px #fc052e,
        0 0 0 30px #FBDD00,
        0 0 0 40px #00BDFB;
    Rahmenradius: 200px;
    Farbe: #ffffff;
 }
 .bangbang{
    Breite: 20px;
    Höhe: 150px;
    Rand: -80px 0px 0px 142px;
    Hintergrundfarbe: #00BDFB;
    Rahmenradius: 10px;
 }
</Stil>
</Kopf>
<Text>
    <div Klasse="runde">
    Hallo Welt!
    </div>
    <div Klasse="bangbang"></div>
</body>
</html>

Effektbild:

Heute gewonnene Erkenntnisse:

1:Über die Abkürzung der Schriftart

Schriftstil: kursiv;
Schriftvariante: Kapitälchen;
Schriftstärke: fett;
Schriftgröße: 12px;
Zeilenhöhe: 1,5em;
Schriftfamilie: Arial, Verdana;

kann wie folgt geschrieben werden:

Schriftart: kursiv fett 17px/100px Arial, serifenlos;

17px steht für: Schriftgröße
100px steht für: Zeilenhöhe

Was Sie bei der Verwendung von Abkürzungen beachten sollten:

1:Schriftgröße und Zeilenhöhe können nur als ein Wert mit Schrägstrich / geschrieben werden und sind nicht getrennt voneinander möglich.

2: Die Reihenfolge kann nicht geändert werden. Diese Kurzform funktioniert nur, wenn die Attribute „font-size“ und „font-family“ gleichzeitig angegeben werden. Auch wenn Sie Schriftstärke, Schriftstil und Schriftvariante nicht festlegen, werden Standardwerte verwendet.

2: Über die Zentrierung

Am einfachsten ist es, die Texthöhe auf die gleiche Höhe wie die Div-Höhe zu setzen und dann text-align:center festzulegen. Wenn Sie keine Schriftart festlegen, legen Sie line-height:100px fest. Dadurch können Sie den Text auch zentrieren.

3: Über die Grenze

Ich verwende das Attribut „box-shadow“, das auf mehrere Werte eingestellt werden kann. Es ist für mein aktuelles Szenario besser geeignet. Wenn der Wert zwei oder eine Ebene erfordert, können Sie den Rahmen oder zwei Div-Verschachtelungs- oder Umrissattribute direkt einstellen.

Zusammenfassen

Oben sehen Sie den vom Herausgeber eingeführten Beispielcode zum Zeichnen eines Lutschers in CSS. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<: Gestaltung der Bildvorschau auf der Inhaltswebseite

>>: Zusammenfassung der DTD-Verwendung in HTML

Detaillierte Erläuterung der Anwendungsszenarien von Filtern in Vue

CSS-Beispielcode zum Zeichnen eines Lutschers

Detaillierte Erläuterung der Anwendungsszenarien von Filtern in Vue

Verwenden Sie Vue3, um eine Komponente zu implementieren, die mit js aufgerufen werden kann

Liste der HTML-Tags und Hinweise zur Verwendung

So verwenden Sie den Linux-Befehl „more“ in allgemeinen Linux-Befehlen

Zusammenfassung der grundlegenden Verwendung von JS-Arrays

Analysieren Sie CSS, um die Farbfunktion des Bildthemas zu extrahieren (Tipps)

Detaillierte Erklärung zur Verwendung des CSS-Zeigerereignisse-Attributs

Konfiguration der primären Netzwerk-Portzuordnung für Docker

So verwenden Sie den Linux-Befehl tr

Verwenden von NTP zur Zeitsynchronisierung in Ubuntu

Artikel empfehlen

Detaillierte Erläuterung des Startens und Einhängens des Docker-Nginx-Containers in den lokalen

Vue3 Vue CLI-Konfiguration für mehrere Umgebungen

Mausposition in CSS abbilden und Seitenelemente durch Mausbewegungen steuern (Beispielcode)

Detaillierte Erklärung zur Einführung benutzerdefinierter Schriftarten (Font-Face) in CSS

.NETCore Docker implementiert Containerisierung und privates Image-Repository-Management

Integrationspraxis des Vue+Element-Hintergrundverwaltungsframeworks

Analyse der Implementierungsschritte für geteilte Festplattenpartitionen unter Linux

CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken

Detaillierte Erläuterung der Verwendung der Vue3-Statusverwaltung

Einführung in das Enctype-Attribut des Form-Tags und seine Anwendungsbeispiele

Wissen Sie, wie man Mock in einem Vue-Projekt verwendet?

So implementieren Sie das Abfangen von URIs im Nginx-Standort

Zusammenfassung zur Verwendung von HTML-Meta-Tags (empfohlen)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 (Ubuntu 16.04)

Was ist Tabellenpartitionierung und -partitionierung?MySql-Datenbankpartitionierung und Tabellenpartitionierungsmethode