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

Ein magischer MySQL-Deadlock-Troubleshooting-Datensatz

Lösung für das Problem des verweigerten Zugriffs für den Benutzer „root“ @ „localhost“ (mit Kennwort: JA) bei der Anmeldung bei MySQL 8.0 unter Win10

Artikel

Detaillierte Erklärung der dynamischen Komponenten von vue.js

CSS-Beispielcode zum Zeichnen eines Lutschers

Ein magischer MySQL-Deadlock-Troubleshooting-Datensatz

6 Vererbungsmethoden von JS Advanced ES6

So verwenden Sie Node-Scaffolding zum Erstellen eines Servers zur Implementierung der Token-Verifizierung

Designtheorie: Textausdruck und Benutzerfreundlichkeit

Einführung in berechnete Eigenschaften in Vue

Die Verwendung eines eindeutigen MySQL-Schlüssels in Abfragen und damit verbundene Probleme

Lösung für das Problem des verweigerten Zugriffs für den Benutzer „root“ @ „localhost“ (mit Kennwort: JA) bei der Anmeldung bei MySQL 8.0 unter Win10

Detaillierte Erklärung der dynamischen Komponenten von vue.js

MySQL 8.0.19 unterstützt die Sperrung eines Kontos nach dreimaliger Eingabe eines falschen Passworts (Beispiel)

Beispiel für die Installation von Kong Gateway in Docker

Artikel empfehlen

So übermitteln Sie den Wert eines deaktivierten Formularfelds in einem Formular Beispielcode

Implementierungscode zur Verwendung der MongoDB-Datenbank in Docker

So erhalten Sie die aktuelle Zeit mit der Funktion time(NULL) und localtime() in Linux

So erstellen Sie einen Nginx-Server mit Docker

So legen Sie die Höhe des automatisch angepassten Textbereichs in Element UI fest

Beispielcode für die programmgesteuerte Verarbeitung von CSS-Stilen

my.cnf (my.ini) wichtige Parameteroptimierungs-Konfigurationsanweisungen

Über MySQL müssen Sie die Datentypen und Operationstabellen kennen

Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue

CSS3 verwendet Animationsattribute, um coole Effekte zu erzielen (empfohlen)

So verwenden Sie VUE, um die Ali Iconfont-Bibliothek online aufzurufen

Uniapp verwendet Baidu Voice, um die Funktion zum Konvertieren von Aufnahmen in Text zu realisieren

Befehl zum Anzeigen der Erstellungszeit der Binlog-Datei unter Linux

Zusammenfassung der Web-Frontend-Kenntnisse (persönliche praktische Erfahrung)

Einrichten freigegebener Ordner in der virtuellen Ubuntu-Maschine von VMWare14.0.0