Bordi rotondi CSS
Esempio # 01:
Allontaniamo i bordi di qualsiasi immagine o alcuni paragrafi. Abbiamo avviato il codice HTML con l'uso del tag di base HTML seguito dal tag Head. Il tag principale contiene il tag del titolo che è stato utilizzato per dare un titolo alla pagina web come "bordi o angoli arrotondati CSS". All'interno del tag corporeo del documento HTML, abbiamo utilizzato una voce di dimensione 1 che non verrà utilizzata per arrotondare gli angoli. Tre paragrafi sono stati utilizzati dall'utilizzo del tag paragrafo "P".
I primi due paragrafi sono stati specificati con 2 classi diverse: A e B. Il terzo paragrafo è stato specificato con l'ID "C". Tutti e tre questi paragrafi contengono frasi che potrebbero essere utilizzate come contenuto del paragrafo. Questi paragrafi possono essere visualizzati con bordi arrotondati sulla pagina HTML. Diamo un'occhiata al CSS di questa pagina. All'interno del tag di stile di questo script HTML, abbiamo specificato le classi A e B per i primi due paragrafi per modellarli separatamente entrambi mentre l'ID "C" viene utilizzato con il segno hash per essere disegnato separatamente.
Abbiamo usato la proprietà del raggio del bordo per la prima classe "A" per aggiungere il raggio di 25 pixel e lo sfondo sarebbe colorato, blu cielo. La proprietà del raggio del bordo è stata utilizzata anche per la seconda classe per aggiungere il raggio del bordo di 45 pixel con due pixel bordo solido attorno ad esso. Per entrambe le prime classi abbiamo utilizzato una larghezza di 200 pixel di imbottitura di 20 pixel e un'altezza di 50 pixel. D'altra parte, il terzo ID paragrafo è stato utilizzato per aggiungere il raggio di 90 pixel attorno ad esso.
Usando la proprietà di sfondo, un'immagine è stata aggiunta come sfondo. Insieme a ciò, la proprietà della posizione di sfondo è stata utilizzata per posizionare lo sfondo di un'immagine e la proprietà di ripetizione di sfondo è stata impostata per ripetere. A causa dell'uso di questa proprietà, l'immagine di sfondo può essere ripetuta il maggior numero possibile. L'imbottitura, l'altezza e la larghezza sarebbero citate allo stesso modo, come abbiamo usato nei due stili sopra per i paragrafi. Il codice è ora completato e possiamo eseguirlo sul codice Visual Studio tramite il menu "Esegui" della sua barra delle applicazioni seguita dall'opzione "Avvia debug".
L'output di questo codice HTML è stato visualizzato sul browser Chrome come di seguito. I primi due paragrafi sono stati disegnati nel raggio del bordo di 25 pixel e 45 pixel rispettivamente. Entrambi i paragrafi contengono sfondi diversi con la stessa imbottitura, larghezza e altezza. Puoi vedere che i bordi del raggio del paragrafo sono stati arrotondati.
Inoltre, il terzo paragrafo è stato visualizzato nel raggio del cerchio di 90 pixel mentre l'immagine utilizzata come sfondo è stata ripetuta molte volte.
Esempio n. 2:
Dobbiamo inizializzare questo esempio con il tag HTML principale e il tag Head. Il tag del titolo è stato usato per dare il titolo a questa pagina HTML come "bordi o angoli arrotondati CSS". Mentre diamo un'occhiata al tag corporeo di questo script HTML, abbiamo trovato una singola intestazione della taglia 1 con un semplice titolo di testo in esso. Questa pagina HTML contiene un totale di 5 paragrafi con l'uso di tag o elementi di paragrafo. Il primo paragrafo sta dimostrando che questo contenente un raggio di bordo di 50 pixel e la forma di Eclipse si sarebbe formata.
Il secondo paragrafo non sta usando altro che un ID "Eclipse". Tutti gli altri tre paragrafi contengono le proprie classi specificate: quattro, tre e due, insieme ad alcune frasi che mostrano i valori del raggio di frontiera utilizzati per la creazione di eclissi diverse per particolari paragrafi. Questi paragrafi mostrerebbero il numero totale di angoli che vengono arrotondati. L'ID "Eclipse" per il primo paragrafo è stato utilizzato per modellare il primo paragrafo in un'eclissi. Abbiamo specificato il raggio del bordo del 50%, sfondo di colore verde giallo, imbottitura di 10 pixel, la larghezza di 110 pixel e altezza di 50 pixel per il primo paragrafo. Quindi, abbiamo usato la classe del terzo paragrafo, "quattro", per arrotondare i quattro angoli del paragrafo. Per questo, abbiamo usato la proprietà del raggio del bordo per i bordi superiore, inferiore, sinistra e destra del paragrafo. Abbiamo specificato lo sfondo come Burlywood, con imbottitura di 15 pixel, una larghezza di 200 pixel e un'altezza di 40 pixel.
Ciò significa che tutti e quattro gli angoli o i bordi del terzo paragrafo sarebbero arrotondati. Affinché il quarto paragrafo sia disegnato dalla classe "tre", tre dei suoi angoli o bordi sarebbero stati arrotondati mentre quello sarebbe rimasto invariato. Lo sfondo è stato specificato come oro mentre l'imbottitura, la larghezza e l'altezza sarebbero gli stessi che abbiamo usato per il terzo paragrafo. Abbiamo usato la classe "due" per il quinto paragrafo per arrotondare i suoi due angoli. La stessa imbottitura, larghezza e altezza verrebbe utilizzata mentre il colore sarebbe diverso per questo paragrafo. Il primo paragrafo non visualizzerebbe i bordi arrotondati perché non contiene alcun stile per esso. Salviamo questo script HTML ed eseguiamolo con il codice Visual Studio tramite l'opzione Avvia Debug.
L'output di questo programma HTML ha dimostrato che il primo paragrafo non contiene bordi arrotondati perché abbiamo perso lo stile di questo paragrafo. D'altra parte, tutti e quattro i paragrafi sono stati disegnati e abbiamo i bordi arrotondati per tutti questi.
Conclusione
Questo riguarda l'uso della proprietà del raggio del bordo per arrotondare i bordi di qualsiasi elemento HTML all'interno dello script HTML. A tale scopo, abbiamo utilizzato gli esempi HTML in modo molto semplice e squisito. Con il primo esempio, abbiamo dimostrato l'uso della proprietà del raggio del bordo per arrotondare tutti i bordi di un elemento o un'immagine contemporaneamente senza specificare i bordi. D'altra parte all'interno del secondo esempio, abbiamo specificato l'uso di angoli o bordi diversi per arrotondare di conseguenza questi bordi o angoli mediante l'uso di valori diversi.