CSS ha spiegato
Il contorno CSS contiene un insieme di proprietà per personalizzare i colori, gli stili, l'offset e la larghezza del contorno. Le proprietà del contorno, della larghezza del contorno, dello stile e dell'offset del contorno del contorno CSS aiutano a personalizzare il contorno. Oltre a questi, la proprietà Shorthand del contorno CSS offre la stessa funzionalità in una sintassi di una singola riga. Questo articolo fornisce la guida dettagliata sulle proprietà del contorno CSS e servirebbe i seguenti risultati di apprendimento:
- Funzionamento delle proprietà del contorno CSS
- Utilizzo del contorno CSS (con esempi)
Come funziona il contorno CSS
Le proprietà del contorno CSS tendono a eseguire varie personalizzazioni di schema. Questa sezione fornisce la sintassi consigliata e il funzionamento di tutte le proprietà del contorno CSS.
CSS contorno (stile): La sintassi fornita di seguito Assista per cambiare lo stile del contorno.
Selector Style di contorno: valore;- selettore: Il selettore è un elemento o la classe CSS su cui verrà applicata la proprietà
- valore: Il valore dello stile può essere punteggiato, tratteggiato, doppio, solido, scanalatura, nascosto, nessuno e altro ancora.
Schema CSS (larghezza): La larghezza dello schema può essere impostata utilizzando la proprietà della larghezza del profilo di CSS e può essere utilizzata nel modo seguente.
Selector witch-width: value;valore: Accetta pochi valori predefiniti come sottili, medi e spessi. Il peso della linea per spesso è 1 px, poiché il mezzo è 3px e per lo spesso è 5px (tutti questi sono valori approssimativi). Inoltre, l'utente può anche specificare il suo valore in PX, EM, CM, MM.
Contorno CSS (colore): Il colore del contorno è definito usando la sintassi.
selettore contorno-color: value;valore: Questo valore di colore può essere fornito in numerosi modi. È possibile utilizzare il nome esatto (come rosso, blu) del colore, valore esadecimale del colore, motivo RGB/RGBA, invertito (per rendere visibile il contorno indipendentemente dal colore di sfondo) e HSL.
Schema CSS (offset): Di solito, lo schema inizia subito dopo il bordo, tuttavia, la proprietà offset può essere utilizzata per aggiungere spazio tra il contorno e il bordo di un elemento. La sintassi della proprietà offset è:
Selector Offset di schema: valore;valore: accetta i valori px, em, rem, cm, mm. Il PX è una misura statica mentre le misure REM ed EM sono reattive in quanto dipendono dai valori dei genitori.
Proprietà Shorthand del CSS: La proprietà Shorthand del contorno CSS consente di aggiungere larghezza, colore e stile a uno schema dell'elemento utilizzando un codice di riga singolo. I seguenti articoli si riferiscono alla proprietà stenografia:
selettore schema: valore1 valore2 valore3;Value1, valore2 e valore3 si riferiscono a valori di larghezza, stile e colore del contorno di un elemento.
Come usare il contorno CSS
Questa sezione illustra diversi esempi che presentano l'uso della larghezza di contorno CSS, in stile contorni, del colore, dell'offset del contorno e della proprietà shorthand.
Esempio 1: Utilizzo della larghezza di contorno, dello stile del contorno, del colore del contorno e dell'offset del contorno
Questo esempio dimostra singolarmente le proprietà del contorno CSS utilizzando il codice di seguito.
rosso-colore, larghezza e offset in PX, in stile stile
Color-RGB, larghezza e offset in %, solido allo stile
Color-Hex, larghezza e offset in EM, stile-doppia
La descrizione del codice è fornita di seguito:
- Vengono create tre classi CSS denominate "Sty", "Stya" e "Styb". Ogni classe è definita per utilizzare le proprietà del contorno con varie unità di misura o valori da loro supportati.
- La classe "Sty" utilizza il rosso come colore, larghezza e offset è definito in PX dove lo stile del contorno è trattato
- Lo "stya" utilizza il colore RGB, la larghezza e l'offset in mm e lo stile è solido
- Lo "styb" usa il valore esadecimale di colore, larghezza e offset in em e lo stile è punteggiato
- I paragrafi di questo documento sono disegnati in "groove" con colore "nero" e margine-bottom di "25px".
L'immagine del codice è mostrata di seguito:
Produzione:
L'output contiene tre paragrafi, il primo utilizza la classe "Sty", in cui il secondo e il terzo fanno uso di classi "stya" e "styb".
Esempio 2: Utilizzo della proprietà Shorthand del contorno CSS
La proprietà Shorthand del contorno CSS consente di implementare la larghezza, il colore e lo stile del contorno in una sola linea. Il codice fornito di seguito pratichi la proprietà shorthand del profilo:
larghezza medio, stile-doppio, colore-verde
larghezza-4px, stile stile, azzurro
larghezza-sottile, stile stile
in stile
larghezza medio, colore-arancio
La descrizione del codice è
- In primo luogo, sono definiti pochi stili di paragrafo
- Inizializzati cinque classi CSS chiamate "outA", "outb", "outc", "outd" e "oute" per la proprietà stenografia con schema
- Le classi "outA" e "outb" usano la proprietà stenografia per impostare "larghezza", "stile" e "colore" di contorno
- Le classi "outc" e "oute" alterano due proprietà mentre "outd" personalizza lo stile
Produzione:
L'output sopra mostra che se lo stile della proprietà stenografia non è considerato, non sarai in grado di ottenere il contorno.
Conclusione
Il contorno CSS consente di alterare il colore, la larghezza, lo stile e il valore offset del contorno. Questo articolo fornisce i possibili modi per esercitare le proprietà del contorno CSS per modificare lo schema. Le proprietà del contorno, della larghezza del contorno, dello stile e dell'offset del contorno di CSS aiutano a personalizzare lo schema. Inoltre, la proprietà Shorthand del contorno CSS aiuta a modificare il colore, la larghezza e lo stile utilizzando un codice a riga singola. Per una migliore sottovalutazione, questo post fornisce il meccanismo di lavoro utilizzando la sintassi. Otterresti anche il set di esempi che mostrano l'implementazione di tutte queste proprietà individualmente e anche la mano di contorno.