Neulinge spielen etwas schwarze Technologie in CSS

fanxiaolin84 · Veröffentlicht am 04.12.2017 20:24:39

Autsch
1. Bewegt man die Maus auf die Webseite, ist sie weg = =
*{ Cursor: None!important; }2. Einfacher Textunschärfeeffekt
*{ Farbe: transparent; Text-Schatten: #111 0 0 5px; }
3. Mehrere Grenzen
.div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); Größe: 200px; Marge: 50px Auto; Breite: 400px}
4. CSS in Echtzeit bearbeiten
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
5. Einfache Operationen in CSS
.div{ width: calc(100% - 500px); }
6、Grenzradius
Weil im Grunde viele Leute es so nutzen:
.div { Grenzradius: 4px; }
Ein bisschen hochwertiger ist so:
.div { Grenzradius: 4px 6px 6px 6px 4px; }
So wird jedoch die ultimative schwarze Technologie eingesetzt:
.div { Grenzradius: 5px 5px 3px 2px / 5px 5px 1px 3px; }

Grenzradius Es können 8 Werte zugewiesen werden:
Die Vorderseite des Schrägstrichs beeinflusst die horizontale Richtung, und die Rückseite des Schrägstrichs beeinflusst die vertikale Richtung.
Jede Zahl steht für vier verschiedene Richtungen.

7、Umriss-Versatz
Wenn du CSS unter Eingabe schreibst, bist du mit den folgenden Anweisungen vertraut:
eingabe { Gliederung : keine; }eingabe:fokus { Gliederung : keine; So entfernt man das Standard-blaue Wireframe aus der Eingabebox.
Es gibt auch eine Outline-Offset-Eigenschaft in CSS, mit der man den Abstand des Standard-Drahtgitters einstellen kann:
Eingabe { Outline-Offset: 4px ; }(Web-Frontend-Lernaustauschgruppe: 328058344 Kein Smalltalk, nicht teilnehmen, wenn es dir nicht gefällt! Passt man die Größe des Attributwerts an, sieht man die Entfernungsänderung der Umrisszeichnung.
Abschließend werde ich eine Demo des Big White vor den Fakten präsentieren
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> body { hintergrund: #595959; } #baymax{ /* wird auf Zentrum gesetzt*/ Rand: 0 Auto; /*Höhe*/ Höhe: 600px; /*Überlauf verbergen*/ Überlauf: versteckt; } #head{ Größe: 64px; Breite: 100 px; /*Definiere die Form der abgerundeten Ecke als Prozent*/Randradius: 50%; /*hintergrund*/ Hintergrund: #fff; Marge: 0 Auto; Margin-Bottom: -20px; /*Setze den Stil des unteren Randes*/ Rand-unten: 5px einfarbig #e0e0e0; /*Attribut legt die Stapelreihenfolge der Elemente fest; Elemente mit einer höheren Stapelordnung liegen immer vor den Elementen mit niedrigerer Stapelordnung*/ z-Index: 100; /*Relativ positionierte Elemente erzeugen*/ Position: relativ; } #eye, #eye2{ Breite: 11px; Größe: 13 Pixel; Hintergrund: #282828; Grenzradius: 50 %; Position: Verwandt; Oben: 30 Pixel; links: 27px; /*das Element drehen*/transformieren: drehen(8°); } #eye2{ /*Lass es symmetrisch rotieren*/ transformieren: rotate(-8°); links: 69 px; Oben: 17 Pixel; } #mouth{ Breite: 38px; Größe: 1,5 Pixel; Hintergrund: #282828; Position: Verwandt; links: 34px; oben: 10 Pixel; } /*Torso und Bauch*/ #torso, #belly{ Rand: 0 Auto; } Größe: 200px; Breite: 180px; Hintergrund: #fff; Grenzradius: 47 %; /*Rand setzen*/ Rand: 5px durchgehend #e0e0e0; Grenze: keine; z-Index: 1; } #belly{ Höhe: 300px; Breite: 245 px; Margin-oben: -140px; z-Index: 5; } #cover{ Breite: 190px; Hintergrund: #fff; Größe: 150px; Marge: 0 Auto; Position: Verwandt; Oben: -20 Pixel; Grenzradius: 50 %; } /*heart*/ #heart{ width:25px; Größe: 25 Pixel; Grenzradius: 50%; Position: Verwandt; /*Fügen Sie Schatteneffekte rund um den Rand hinzu*/ Box-Schatten:2px 5px 2px #ccc eingefügt; rechts: -115 px; top: 40 Punkte; z-Index: 111; Rand: 1 Pixel fest #ccc; } /*Arm*/ #left-Arm, #right-Arm{ Höhe: 270px; Breite: 120 px; Grenzradius: 50 %; Hintergrund: #fff; Marge: 0 Auto; Position: Verwandt; Oben: -350 Pixel; links: -100px; Transformieren: Drehen (20 Grad); z-Index: -1; } #right-arm{ transform: rotate(-20°); links: 100 px; Oben: -620 px; } /*finger*/ #l-bigfinger, #r-bigfinger{ height: 50px; Breite: 20px; Grenzradius: 50 %; Hintergrund: #fff; Position: Verwandt; Oben: 250 Pixel; links: 50px; Transformieren: Drehen (-50 Grad); } #r-bigfinger{ links: 50px; Transformieren: Drehen (50 Grad); } #l-smallfinger, #r-smallfinger{ height: 35px; Breite: 15px; Grenzradius: 50 %; Hintergrund: #fff; Position: Verwandt; Oben: 195 Pixel; links: 66px; Transformieren: Drehen (-40 Grad); } #r-smallfinger{ hintergrund: #fff; Transformieren: Drehen (40 Grad); Oben: 195 Pixel; links: 37px; } /*Oberschenkel*/ #left-Bein, #right-Bein{ Höhe: 170 px; Breite: 90px; Grenzradius: 40 % 30 % 10 px 45 %; Hintergrund: #fff; Position: Verwandt; Oben: -640 px; links: -45 px; Transformieren: rotate(-1°); z-Index: -2; Marge: 0 Auto; } #right-leg{ hintergrund: #fff; Grenzradius: 30% 40% 45% 10px; Marge: 0 Auto; Top: -810px; links: 50px; Transformieren: Drehen (1 Grad); </style><body> } <div id="baymax">  <div id="Kopf"> <div id="auge"></div> <div id="eye2"></div> <div id="Mund"></div> </div>  <div id="Torso"> <div id="Herz"></div> </div>  <div id="Bauch"> <div id="Cover"></div> </div>  <div id="linker Arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div>  <div id="right-arm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> definieren  <div id="left-leg"></div> definieren  <div id="rechtes Bein"></div> </div></body><html>

QWERTYU · Veröffentlicht am 05.12.2017 09:10:05

Der Code kann bearbeitet werden

Administrator · Veröffentlicht am 05.12.2017 09:21:19

Dabai ist gut

Den Code gelöst

Login ist sichtbar.

[CSS/DIV] Neulinge spielen etwas schwarze Technologie in CSS

Punktzahl

Betrachtete Abschnitte