Proprietà Shorthand Border CSS
Le proprietà stendarie di CSS tendono a eseguire contemporaneamente più proprietà. La proprietà Shorthand Border CSS ti consente di cambiare del tutto la larghezza, lo stile e il colore del bordo. Questo articolo fornisce una dimostrazione sul funzionamento della proprietà di bordo stenano. Inoltre, sono illustrati vari esempi per mettere in mano la proprietà di bordo stenano.
Come funziona la proprietà di bordo stenano
La proprietà CSS Border Shorthand funziona in base alla seguente sintassi:
Selector Border: Width Style Color;Nella sintassi sopra,
- IL selettore può essere qualsiasi elemento o può fare riferimento alla classe in CSS
- IL larghezza si riferisce alla larghezza del confine e può essere impostato in PX, EM, %. PX imposta lo standard ed EM mostra il risultato che si riferisce al valore PX. Ad esempio, se il corpo ha il valore PX è uguale a 4px, sarebbe uguale a 1em, allo stesso modo, per 8px sarebbe 2em.
- IL stile rappresenta lo stile del bordo e può essere punteggiato, tratteggiato, solido, doppio, trattino, scanalatura, nascosto, inserto, inizio, nessuno.
- IL colore La proprietà aggiunge colore ai bordi e il colore può essere fornito utilizzando il nome esatto (rosso, blu), usando il valore esadecimale del colore, utilizzando lo schema del motivo RGB/RGBA.
La discussione di cui sopra deve averti aiutato a ottenere il concetto di proprietà di stenografia del confine CSS.
Come utilizzare la proprietà stenografia del bordo CSS
Il funzionamento fondamentale della proprietà di bordo stenano è fornito nella sezione sopra. Qui eserciteremo pochi esempi che dimostrano l'uso della proprietà Border CSS.
Esempio 1
Viene praticato il seguente codice che applica la proprietà di stenografia del confine CSS.
Benvenuti in Linuxhint
Benvenuti in Linuxhint
La descrizione del codice è fornita di seguito:
- Vengono create due classi CSS denominate "una" e "due"
- La classe "One" utilizza la proprietà bordo stenografia con una larghezza di 2px, lo stile è trattato e il colore è scuro
- La classe "Due" pratiche la proprietà bordo stenografia con i seguenti valori: La larghezza è 2px, lo stile è punteggiata e il colore del bordo è rosso
- Le altre proprietà della classe "una" e "due" si riferiscono a quella di div usata nel corpo.
- Nel corpo vengono utilizzati due tag DIV, il primo tag DIV utilizza una classe "One" di CSS e il secondo tag DIV utilizza una classe "Due" di CSS.
L'immagine del codice è fornita di seguito;
L'output del codice sopra è fornito di seguito:
Esempio 2
La proprietà bordo stenografia accetta tre parametri e il loro utilizzo è fornito nell'esempio sopra. Qui, stiamo prendendo in considerazione solo lo "stile con colore" e "stile con larghezza" della proprietà stenografia del bordo utilizzando il seguente codice.
Benvenuti in Linuxhint
Benvenuti in Linuxhint
La descrizione del codice è fornita di seguito:
- Vengono create due classi CSS denominate "Prim" e "SEC"
- La classe "Prim" contiene lo stile e il colore della proprietà stenografia del bordo
- La classe "SEC" utilizza la larghezza e lo stile
- Nel corpo, vengono creati due paragrafi associati a ciascuna classe CSS
L'immagine del codice è mostrata di seguito:
L'output del codice sopra è mostrato di seguito:
Dagli esempi illustrati sopra, avresti imparato la funzionalità della proprietà di bordo stenano in vari scenari.
Conclusione
La proprietà Shorthand Border CSS comprende tre proprietà di frontiera, larghezza di confine, stile di confine e colore del bordo. Questo articolo fornisce una guida dettagliata sulla proprietà CSS Border Shorthand. Il funzionamento della proprietà di bordo stenano viene brevemente spiegato dove otterrai una comprensione di base di questa proprietà. Inoltre, si affermano diversi esempi che implementano la proprietà stenografia del confine CSS in vari scenari.