Il raggio del bordo del contorno CSS

Potresti aver ascoltato e usato la proprietà del bordo nello stile CSS mentre prepara i file HTML per creare un bordo evidenziato attorno ad alcuni elementi attorno a intestazioni, tabelle e paragrafi. Quando aggiungi un bordo a qualsiasi elemento, puoi modellarlo in diversi modi: creare un bordo solido, punteggiato e tratteggiato o delinealo anche. La proprietà del raggio di confine ti consente di modellare gli angoli di un bordo. All'interno di questa guida, discuteremo di diversi esempi per modellare gli angoli di confine usando la proprietà del contorno e del raggio di confine.

Esempio 01:

Iniziamo con l'esempio più elementare di confini. In questo esempio, dimostreremo l'uso della proprietà bordo per creare un bordo semplice attorno a un elemento utilizzato all'interno del codice HTML. Il codice HTML è stato avviato con il tag Doctype "HTML" che sarà chiuso alla fine del programma HTML. Dopo il tag HTML, abbiamo usato il tag "testa" e il tag del corpo. Il tag "head" utilizzerà il tag di stile per progettare la nostra pagina web.

All'interno del tag del corpo, abbiamo utilizzato l'intestazione "H1" che sarà delle dimensioni più grandi nelle intestazioni HTML. Questa intestazione contiene solo due parole, "raggio di confine". All'interno del tag di stile, stiamo utilizzando l'intestazione H1 per modellarlo un po '. All'interno delle parentesi ricci, abbiamo usato la proprietà "bordo" per creare un bordo attorno all'intestazione. Abbiamo specificato la larghezza del bordo come 3 pixel solidi e sarà rosso. Lo stile e la tag della testa sono chiusi qui. Salviamo ed eseguiamo questo script HTML nel codice Visual Studio e lo apriamo all'interno di Google Chrome.

Dopo l'esecuzione del codice HTML nel codice Visual Studio, la pagina web HTML è stata aperta nel browser Chrome come mostrato di seguito. Questa pagina è stata visualizzata con l'intestazione 1 "Stato del bordo" con il bordo rosso. Questo bordo è di larghezza 3 pixel ed è rosso massiccio.

Fino a ancora, non avevamo discusso del raggio del confine nella nostra soprattutto illustrazione del codice HTML. Quindi, abbiamo usato un totale di 4 titoli con titoli diversi. Poiché tutte le intestazioni sono intestazioni di taglia 1, dobbiamo differenziarle con le classi. Abbiamo specificato nomi di classe separati per entrambi i titoli, "A", "B", "C" e "D". All'interno del tag di stile di un tag di testa, le classi sono definite per modellare separatamente entrambe le intestazioni. Sebbene abbiamo disegnato entrambe le intestazioni in modo abbastanza simile, è necessario farlo separatamente e non mescolarli. Abbiamo creato un bordo attorno alla prima intestazione con un colore rosso solido e sarà di larghezza 3 pixel.

La stessa proprietà "bordo" è stata utilizzata per le altre tre classi contenenti "B", "C" e "D". L'unico cambiamento è il colore blu solido, il colore verde solido e il colore dell'orchide solido anziché il colore rosso per il resto delle intestazioni. Dopo aver aggiunto il bordo da 3 pixel attorno a tutte le intestazioni, è tempo di aggiungere un raggio al bordo. Abbiamo usato la proprietà del raggio di frontiera per aggiungere un bordo di 25 pixel all'intestazione 1. Questo unico valore per la proprietà del raggio di confine verrebbe imbrattato a tutti e 4 gli angoli di un bordo equamente.

Dopo questo, abbiamo usato due valori per la proprietà "raggio di frontiera". Abbiamo applicato questi valori per l'intestazione tre: il primo valore per l'angolo in alto a sinistra, il secondo per l'angolo in alto a destra e in basso a sinistra e il terzo valore per l'angolo in basso a destra. L'ultimo stile per l'intestazione 4 contiene 4 valori per la proprietà del raggio di confine: rispettivamente rispettivamente: in alto a sinistra, in alto a destra, in basso a sinistra e in basso a destra. Salviamo ed eseguiamo questo codice.

Con l'uso di valori diversi per il raggio di confine, abbiamo le intestazioni alterate sulla pagina web mostrate di seguito. L'uso della proprietà del raggio di frontiera con 25 pixel ha fatto la curva del raggio di confine da tutti i lati per la direzione 1. Successivamente, l'uso della proprietà del raggio di confine con 2 valori ha mostrato una curva più delineata per gli angoli in alto a sinistra e in basso a destra rispetto agli angoli in alto a destra e in basso a sinistra nella direzione 2. L'uso di tre valori per l'intestazione tre mostra il chiaro cambiamento del bordo del contorno negli angoli in alto a destra e in basso a sinistra rispetto agli altri lati. L'ultima intestazione ha mostrato il cambiamento in tutti gli angoli.

Esempio 02:

È tempo di creare uno schema per un bordo insieme alle curve nei suoi angoli. Quindi, abbiamo usato un totale di 3 titoli all'interno del tag "corpo" di un tag HTML. Le intestazioni sono inizializzate con il tag di intestazione "H1". La testa di dimensioni più grandi da prodotta sulla pagina web. Tutti e tre le intestazioni sono specificate con tre diverse classi: A, B e C. Queste classi verranno utilizzate nel tag di stile per modellare le intestazioni in modo diverso.

Quindi, all'interno del tag di stile di un tag "testa" nel file HTML, abbiamo specificato le intestazioni insieme alle loro classi per modellarle separatamente. Abbiamo usato la proprietà del raggio di confine per tutte e tre le intestazioni mentre il raggio è stato impostato su valori diversi per i tre titoli: 10px, 25px e 50px. L'imbottitura e la larghezza per tutte e tre le intestazioni sono state specificate rispettivamente con gli stessi valori, 10px e 500px. Abbiamo usato la proprietà di altezza per le prime due intestazioni, 40px ciascuna. Abbiamo impostato la proprietà di sfondo per la prima intestazione, sfondo di colore verde.

La proprietà del bordo è stata utilizzata per la seconda e la terza intestazione per specificare lo spessore del bordo, 5px. Il suo stile è solido e il colore di un bordo da generare. La proprietà del contorno per i bordi è stata utilizzata solo nella terza intestazione creando un contorno tratteggiato da 5px. Salviamo e compiliamo questo codice per vedere le modifiche.

L'output di questo codice HTML ha mostrato la prima testa di una leggera piccola curva dagli angoli senza bordo sottile e riempito con il colore di sfondo verde. Il bordo viola dell'intestazione 2 è più curva e l'intestazione 3 contiene un bordo con un contorno bluastro tratteggiato.

Conclusione:

Questa guida sta dimostrando l'uso dei bordi nei codici HTML insieme alle altre proprietà come il raggio di frontiera e il contorno. Abbiamo discusso degli esempi HTML per modellare le curve di un bordo con l'aiuto di una proprietà del raggio di confine. Insieme a ciò, abbiamo visto come possiamo riempire i bordi di elementi specifici con la proprietà di fondo e creare contorni al di fuori del bordo usando la proprietà del contorno. Durante questi esempi, l'uso di proprietà di larghezza, altezza e imbottitura è stato molto utile da utilizzare nel codice.