Ahi.
1. Sposta il mouse nella pagina web e sparisce = =
*{ cursor: none!important; }2. Semplice effetto di sfocatura del testo
*{ colore: trasparente; testo-ombra: #111 0 0 5px; }![]()
3. Confini multipli
.div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0, 0.2); altezza: 200px; margine: 50px auto; larghezza: 400px}![]()
4. Modifica CSS in tempo reale
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. Operazioni semplici in CSS
.div{ larghezza: calc(100% - 500px); }![]()
6、raggio di confine
Perché fondamentalmente molte persone lo usano così:
.div { border-radius: 4px; }![]()
Un po' più di fascia alta è così:
.div { raggio di confine: 4px 6px 6px 4px; }![]()
Tuttavia, ecco come viene utilizzata la tecnologia nera definitiva:
.div { raggio di confine: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
Raggio di bordo Può essere assegnato 8 valori:
La parte anteriore della barra influenza la direzione orizzontale, mentre la parte posteriore della barra influenza la direzione verticale.
Ogni numero rappresenta quattro direzioni diverse.
7、Offs-contorno
Quando scrivi CSS sotto input, sarai familiare con le seguenti affermazioni:
input { outline : none; }input:focus { outline : none; Ecco come rimuovere il wireframe blu predefinito dalla casella di input input.
C'è anche una proprietà di offset-outline in CSS dove puoi impostare la distanza del wireframe predefinito:
input { outline-offset: 4px ; }(Gruppo di scambio di apprendimento front-end web: 328058344 Niente chiacchiere, non partecipare a meno che non vi piaccia! Regola la dimensione del valore dell'attributo e puoi vedere la variazione di distanza del contorno.
Infine, presenterò una dimostrazione del grande bianco prima dei fatti
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> corpo { background: #595959; } #baymax{ /* è impostato su centro*/ margine: 0 auto; /*altezza*/ altezza: 600px; /*nascondere il trabocco*/ il trabocco: nascosto; } #head{ altezza: 64px; larghezza: 100px; /*Definisci la forma dell'angolo arrotondato come percentuale*/raggio di bordo: 50%; /*background*/ background: #fff; margine: 0 auto; margine-fondo: -20px; /*Imposta lo stile del bordo inferiore*/ bordo-inferiore: 5px solido #e0e0e0; /*attributo stabilisce l'ordine di impilamento degli elementi; Gli elementi con ordine di stack superiore saranno sempre davanti a quelli con ordine di stack inferiore*/ z-index: 100; /*Generare elementi posizionati relativi*/ posizione: relativa; } #eye, #eye2{ larghezza: 11px; altezza: 13px; Contesto: #282828; raggio di confine: 50%; posizione: relativa; Top: 30px; sinistra: 27px; /*ruota l'elemento*/trasforma: ruota(8grad); } #eye2{ /*Fallo ruotare simmetricamente*/ trasformare: ruotare(-8grad); sinistra: 69px; Alta: 17px; } #mouth{ larghezza: 38px; altezza: 1,5px; Contesto: #282828; posizione: relativa; sinistra: 34px; Top: 10px; } /*Torso e addome*/ #torso, #belly{ margine: 0 auto; } altezza: 200px; larghezza: 180px; Contesto: #fff; raggio di confine: 47%; /*Imposta bordo*/ bordo: 5px solido #e0e0e0; bordo superiore: nessuno; Z-Indice: 1; } #belly{ altezza: 300px; larghezza: 245px; margine in cima: -140px; Z-indice: 5; } #cover{ larghezza: 190px; Contesto: #fff; Altezza: 150px; margine: 0 auto; posizione: relativa; Top: -20px; raggio di confine: 50%; } /*cuore*/ #heart{ larghezza:25px; altezza: 25px; raggio di confine: 50%; posizione: relativo; /*Aggiungi effetti di ombra intorno al bordo*/ box-shadow:2px 5px 2px #ccc inserito; destra:-115px; top:40px; z-indice:111; bordo:1px solido #ccc; } /*braccio*/ #left-braccio, #right-braccio{ altezza: 270px; larghezza: 120px; raggio di confine: 50%; Contesto: #fff; margine: 0 auto; posizione: relativa; Massimo: -350px; sinistra: -100px; trasformare: ruotare (20grad); Z-indice: -1; } #right-braccio{ trasformazione: ruotare(-20°); sinistra: 100px; Alto: -620px; } /*dito*/ #l-dito grande, #r dito grande{ altezza: 50px; larghezza: 20px; raggio di confine: 50%; Contesto: #fff; posizione: relativa; Massimo: 250px; sinistra: 50px; trasformare: ruotare (-50°); } #r-bigfinger{ left: 50px; trasformazione: ruota (50°); } #l-dito piccolo, #r-dito minuscolo{ altezza: 35px; larghezza: 15px; raggio di confine: 50%; Contesto: #fff; posizione: relativa; Top: 195px; sinistra: 66px; trasformazione: ruotare (-40grad); } #r-ditocorto{ background: #fff; trasformazione: ruota (40°); Top: 195px; sinistra: 37px; } /*coscia*/ #left-gamba, #right-gamba{ altezza: 170px; larghezza: 90px; raggio di confine: 40% 30% 10px 45%; Contesto: #fff; posizione: relativa; Massimo: -640px; sinistra: -45px; trasformare: ruotare (-1°); Z-indice: -2; margine: 0 auto; } #right-gamba{ background: #fff; raggio di confine: 30% 40% 45% 10px; margine: 0 auto; Top: -810px; sinistra: 50px; trasformazione: ruotare (1°); </style><body> } <div id="baymax"> <!-- Definisci la testa, includendo due occhi, bocca --> <div id="testa"> <div id="occhio"></div> <div id="occhio2"></div> <div id="bocca"></div> </div> <!-- Definisci il tronco, incluso il cuore --> <div id="torso"> <div id="cuore"></div> </div> <!-- Definisci la pancia, l'addome, inclusa la copertura (e la giunzione del torso) --> <div id="panfle"> <div id="copertura"></div> </div> <!-- Definisci il braccio sinistro, inclusi due dita, una grande e una piccola --> <div id="braccio sinistro"> <div id="l-dito grande"></div> <div id="l-dito-piccolo"></div> </div> <!-- Definisci il braccio destro, che include anche un dito grande e uno piccolo --> <div id="braccio destro"> <div id="r-dito grande"></div> <div id="r-dito-minuscolo"></div> </div> <!-- definire gamba sinistra --> <div id="gamba sinistra"></div> <!-- definire gamba destra --> <div id="gamba destra"></div> </div></body><html>![]()
|
Pubblicato su 04/12/2017 20:24:39
|
|
|
|
Pubblicato su 05/12/2017 09:10:05
|
Pubblicato su 05/12/2017 09:21:19
