Proprietà a confine in CSS
La proprietà bordo-color accetta i colori in più tendenze come il nome esatto dei colori, una rappresentazione esadecimale del colore e le rappresentazioni RGB/RGBA.
Questo articolo fornisce i possibili modi per impostare la proprietà di bordo di un elemento HTML.
Come funziona la proprietà a bordo bordo in CSS
Un elemento è circondato da quattro bordi, superiore, inferiore, inferiore e superiore. La proprietà bordo-color in CSS segue la sintassi fornita di seguito:
Border-color: Value;La parola chiave a bordo bordo rimane la stessa mentre il valore dipende dal requisito dell'utente e può essere il nome del colore esatto, il valore esadecimale del colore o la combinazione RGB/RGBA.
Come utilizzare la proprietà a bordo bordo in CSS
Questa sezione comprende diversi scenari per applicare la proprietà di bordo in CSS.
Esempio 1: usando la combinazione RGB
Nel calcolo, l'RGB (rosso verde blu) è lo standard ampiamente usato quando si passa attraverso la gestione del colore. Il valore di R, G e B varia da 0 a 255 e ogni combinazione di valori restituisce un colore diverso.
Ad esempio, il seguente codice HTML pratica la classe CSS interna per impostare il colore del bordo.
Benvenuti in Linuxhint
L'immagine del codice sopra è fornita di seguito:
Produzione:
Esempio 2: usando la combinazione RGBA
L'RGBA (rosso, verde, blu, alfa) è un'estensione di RGB e l'alfa rappresenta la trasparenza del colore. Il valore Alpha varia da 0.0 a 1.0 (0.0 è il meno trasparente e 1.0 è il più trasparente). Il codice fornito di seguito pratichi il CSS interno per applicare RGBA:
Benvenuti in Linuxhint
Viene creata una classe CSS chiamata "Bor-color" che contiene la proprietà del colore del bordo. Questa classe viene quindi utilizzata nell'elemento del paragrafo del corpo.
Produzione:
Esempio 3: usando il nome di un colore
Il nome del colore esatto può essere utilizzato per specificare il colore del bordo come illustrato nel seguente codice
Benvenuti in Linuxhint
Il codice HTML sopra contiene,
- Un tag di stile per aggiungere una classe CSS chiamata "Bor-Col" per impostare il colore bordo
- e viene creato un paragrafo associato alla classe CSS
Produzione:
Esempio 4: usando il valore esadecimale del colore
Il valore esadecimale di un colore può essere usato anche per il colore del bordo. Il seguente codice pratica il codice esadecimale di colore nero per usarlo per il colore del bordo:
Benvenuti in Linuxhint
Una classe CSS è definita nel codice sopra per impostare il colore bordo in formato esadecimale e viene creato un paragrafo per utilizzare quella classe CSS.
Produzione:
Esempio 5: Utilizzo della proprietà a bordo bordo su bordi individuali
La proprietà bordo-color è suddivisa in colore a fondo di confine, colore di bordo destra, bordo-color bordo-colore e colore-bordo-sinistra per colorare i lati del bordo. Il seguente codice viene praticato per dare colori ai lati dei bordo individualmente.
Il lato superiore del bordo è colorato
Il lato destro del bordo è colorato
Il lato inferiore del bordo è colorato
Il lato sinistro del bordo è colorato
Nel codice sopra scritto,
- Vengono create quattro classi CSS denominate come "top", "destra", "in basso" e "a sinistra" che vengono utilizzate per applicare "bordo-color-color", "bordo-colore", "bordo-colore-colore "E" bordo-sinistra ".
- I confini del paragrafo sono in stile solido
- Vengono creati quattro paragrafi e ognuno contiene una classe CSS
Produzione:
Conclusione
La proprietà bordo-color del CSS consente le variazioni del colore del bordo in base ai requisiti. Questo post descrittivo fornisce la dimostrazione dell'utilizzo della proprietà a bordo in CSS per cambiare il colore del bordo. Esistono numerosi modi per farlo, la proprietà bordo-color accetta i colori in più tendenze come il nome esatto del colore, una rappresentazione esadecimale del colore e le rappresentazioni RGB/RGBA. Alla fine, avresti appreso l'applicazione della proprietà di bordo in CSS esplorando più scenari indicati in questa guida.