Lati di confine in CSS
- Styling singoli lati di confine in CSS
- Styling a più lati di confine in CSS
Come modellare i lati del bordo in CSS
Questa sezione contiene l'uso della proprietà laterale dei bordi in diversi scenari.
Come modellare un lato del bordo in CSS
Questa sezione pratica le proprietà denominate in stile bordo-top, in stile bordo-sinistra, in stile bordo-fondo e in stile bordo-fondo.
Border-Top-Style: Value; // allo stile Top Borderbordo-destra: valore; // per stile bordo destro
Border-Bottom-Style: Value; // per stile Border
Border-Left-Style: Value; // per stile Bordo sinistro
Il valore delle proprietà di cui sopra può essere punteggiato, tratteggiato, solido, doppio, scanalatura ecc.,
Il codice fornito di seguito utilizza le proprietà sopra dichiarate.
La proprietà in stile bordo-top
la proprietà in stile frontale
La proprietà in stile bordo-fondo
La proprietà in stile frontale
Il codice è spiegato come,
- Vengono create quattro classi CSS denominate "top", "destra", "in basso" e "a sinistra"
- Ogni classe è associata a una proprietà diversa come la classe "top" utilizza la property bordo-top-stile e così via.
- Queste classi CSS sono quindi incorporate in quattro diversi paragrafi
Produzione:
Come impostare lo stesso stile per tutti i lati di confine
Dovresti menzionare solo un modello di stile nella proprietà in stile bordo di CSS. Per facilità, abbiamo una sintassi scritta di questa specifica proprietà dei lati di confine:
in stile bordo: valore;Il seguente codice imposta lo stile di ciascun lato del bordo solido.
Benvenuti in Linuxhint
L'immagine del codice è fornita di seguito:
Produzione:
Come impostare lo stesso stile per i lati di confine opposti
Per fare ciò, la seguente sintassi ti aiuterebbe.
Border Style: Value1 Value2;Il valore1 cambierà lo stile dei bordi superiore e inferiore mentre il valore2 si riferisce al fondo sinistro e destro.
Il seguente codice pratica questa proprietà di stile di CSS:
Benvenuti in Linuxhint
I bordi superiore e inferiore sarebbero disegnati in solido mentre i bordi destro e sinistro saranno punteggiati.
L'immagine del codice è fornita di seguito:
Produzione:
Come modellare il bordo usando tre valori
Se il numero di valori è tre, i valori 1st e 3 ° modellare la parte superiore e inferiore, mentre il 2 ° valore appartiene ai lati destra/sinistra.
Border Style: Value1 Value2 Value3;Valore1 per Top, Valore2 per il fondo e valore3 per gli stili sinistra/destra sul lato inferiore. L'esempio seguente utilizza la sintassi sopra per modellare tre lati di bordo:
Benvenuti in Linuxhint
Il codice modella rispettivamente i confini superiore, a destra e inferiore.
Produzione:
Come impostare stili diversi per ogni lato del bordo
La seguente sintassi aiuta a cambiare lo stile del bordo di ogni lato.
Border Style: Value1 Value2 Value3 Value4;Il valore1 e il valore3 si riferiscono ai confini superiore e inferiore mentre il valore2 e il valore4 sono per il fondo sinistro e destro.
Le seguenti pratiche di codice per modellare tutti i lati di confine in CSS.
Benvenuti in Linuxhint
Il codice sopra modifica lo stile in alto e in basso in solido e tratteggiato. Tuttavia, i bordi destro e sinistro saranno in stile rispettivamente tratti e solidi.
L'immagine del codice sopra è fornita di seguito:
Produzione:
Conclusione
Gli elementi in HTML possono essere chiusi in un bordo e i lati del bordo possono essere manipolati usando le varie proprietà del CSS. Questo articolo fornisce la dimostrazione dei lati di frontiera nel CSS. I lati del bordo possono essere tratteggiati, punteggiati o solidi. È possibile impostare lo stesso stile per tutti i bordi, stili diversi per tutti i bordi o impostare lo stesso stile per la parte superiore/inferiore e destra/sinistra. Per una migliore comprensione, abbiamo anche fornito gli esempi che illustrano i suddetti scenari.