Raggio di contorno CSS

Il più delle volte, tendiamo a mescolare la proprietà del contorno di HTML con la sua proprietà di confine. Mentre entrambe le proprietà sono piuttosto diverse l'una dall'altra. La proprietà del confine può occupare spazio extra. Lo schema di qualsiasi elemento non può occupare spazio e può sovrapporsi anche ad altri elementi. Non possiamo impostare i lati di uno schema per un elemento specifico. Tuttavia, possiamo impostare tutti i 4 lati di un bordo separatamente. Inoltre, non è possibile modificare le dimensioni o la posizione dell'elemento con l'aiuto di un contorno attorno ad esso. Il contorno è sempre sul lato esterno dell'elemento e il bordo viene usato per essere il lato interno dell'elemento. Rappresenteremo l'uso del profilo nei codici HTML insieme a verificarne il raggio.

Esempio # 01:

Iniziamo con l'uso dei confini nel nostro esempio. Dopodiché, prendiamo una maschera nella proprietà. Usando la sintassi di base della creazione di un file HTML, abbiamo utilizzato tag HTML, Head, Style e Body all'interno di questo programma di Codice Visual Studio. All'interno del tag corpo. L'H1 è la più grande intestazione disponibile e può essere abbreviata a H6, che è la dimensione più piccola disponibile. L'H1 contiene un semplice "esempio di confine". Mentre l'H2 contiene una frase lunga. All'interno del tag di stile del tag "testa", abbiamo disegnato la voce "H2" aggiungendo un bordo del colore blu di 3 pixel su di esso. Salviamo questo codice ed eseguiamolo nel browser Google Chrome.

Dopo aver eseguito questo codice HTML del codice Visual Studio in qualsiasi browser, abbiamo risultati mostrati di seguito. La prima intestazione è stata presa come una semplice intestazione senza alcun stile. Mentre la seconda intestazione è stata visualizzata con il bordo solido di colore blu di 3 pixel attorno ad esso.

Aggiungiamo un bordo e delinea entrambi contemporaneamente su qualsiasi intestazione per vedere la differenza. Abbiamo usato lo styling per l'intestazione H2 come mostrato. Abbiamo aggiunto una linea extra nello stile di H1 per la creazione di contorni. Questo contorno sarà in colore verde e in formato tratteggiato. Ciascuno dei suoi punti sarà di 5 pixel come specificato. Il bordo è già definito come 2 pixel blu solido. Salviamo e debug questo codice HTML di Visual Studio ed eseguiamolo sul browser.

L'output del codice HTML sopra ha visualizzato la pagina di fascia mostrata. Il colore blu attorno all'intestazione "H2" mostra il bordo solido mentre la linea verde tratteggiata di dimensioni 5 pixel ha illustrato il contorno della intestazione 2. Ora puoi vedere la differenza.

Esempio # 02:

Anche il contorno può essere solido, proprio come il confine. Prendiamo una veste da un altro esempio per creare un nuovo profilo solido. Quindi, abbiamo usato lo stesso file con una piccola differenza rispetto al codice sopra. In questo file HTML, abbiamo utilizzato la stessa intestazione H1 della dimensione 1 e un tag "div" è stato utilizzato per creare una nuova sezione all'interno della stessa pagina HTML. Puoi aggiungere più di 1 elemento nella sezione "Div". In questo momento, abbiamo aggiunto la semplice riga di testo in esso per delineare il tag "Div" ". All'interno del tag di stile di questo file HTML, abbiamo usato il titolo del tag "Div" per modellarlo. Stiamo usando la proprietà del contorno per contornare 3 pixel. Questo contorno sarà solido senza trattini o punti. Il suo colore sarà "giallo-verde" come specificato nell'area di stile. Il valore "3px" è stato utilizzato per specificare la lunghezza di un contorno: quanto spesso o sottile. Salviamo questo codice ed eseguiamolo nel browser per vedere i risultati.

Il contorno del colore giallo-verde della taglia 3 pixel è stato generato attorno al lato esterno dell'elemento "div". Sembra molto simile ai bordi sebbene la sua direzione sia sempre verso l'esterno.

All'interno di tutti gli esempi di cui sopra, abbiamo coperto la creazione di un bordo solido, un profilo solido e un profilo tratteggiato nel file HTML. Ora creeremo un profilo tratteggiato attorno all'elemento HTML. Finora abbiamo cercato di usare lo stesso script HTML nel codice Visual Studio. Un singolo cambiamento che abbiamo fatto nel tag di stile è l'uso della parola chiave "tratteggiata" invece di "solido" per progettare il contorno di 3 pixel. Inoltre, abbiamo cambiato il colore per il contorno in "Blue-Violet". Salviamo semplicemente questo script aggiornato HTML ed eseguiamolo.

Dopo il debug riuscito di questo codice HTML all'interno del codice Visual Studio, è stato eseguito all'interno del browser Chrome e abbiamo l'output mostrato di seguito. Lo schema tratteggiato blu-violeta è stato generato attorno alla sezione "div" di questa pagina statica HTML.

Esempio # 03:

Diamo un'occhiata al raggio di uno schema nello script HTML. Come abbiamo già discusso nel paragrafo introduttivo, non possiamo specificare i valori per ciascun lato del profilo separatamente come possiamo fare per i confini. Quindi, all'interno dello stesso file HTML, abbiamo aggiornato il corpo e il tag di stile come richiesto. Abbiamo usato un totale di 1 tag di intestazione "H1", 4 tag "div" e 3 tag di paragrafo "P".

L'intestazione sarà della dimensione più grande ("Esempio di contorno") mentre tutti i 4 tag "Div" contengono 4 classi specificate "A", "B", "C" e "D" per la creazione di 4 sezioni all'interno del Stesso pagina HTML. I paragrafi sono stati lasciati vuoti solo per il bene dello stile. Questo è per il tag "corpo". Usando le classi specifiche di ogni tag "div", abbiamo specificato la proprietà "schema" al suo interno. Creerà un profilo blu-violetto tratteggiato per la sezione 1a e terza "div" e un contorno blu-violetta "tratteggiato" per il 2 ° e il 4 ° tag "Div". Tutti questi contorni saranno della stessa larghezza, "4px". Abbiamo utilizzato la proprietà "-moz-outline-radius" dei contorni per impostare valori per ciascun lato del profilo separatamente. Abbiamo fissato il raggio del lato sinistro per Div 1, lato sinistro/destro per Div 2, lato sinistro/destro/superiore per Div 3 e tutti i 4 lati per Div 4. La larghezza, il margine e l'imbottitura per tutte e 4 le sezioni "div" sono state le stesse. Proviamo ora il risultato per questo codice.

Dopo l'esecuzione di questo codice HTML, abbiamo ottenuto i contorni di 4 pixel per tutte le sezioni. L'uso della proprietà RADIUS non influisce sull'output mentre la larghezza è stata aggiornata utilizzando la "larghezza" della sezione "div".

Conclusione:

Il paragrafo introduttivo è stato utilizzato per dimostrare la chiara differenza tra la proprietà del bordo e la proprietà del contorno dello stile CSS in HTML. All'interno degli esempi che abbiamo usato in questo articolo, abbiamo discusso di creare diversi tipi di contorni rispetto ai confini insieme alle loro differenze. Inoltre, abbiamo discusso dell'esempio per dimostrare che il raggio di uno schema non può essere cambiato e dipende totalmente dal bordo dell'elemento per renderlo evidenziato e può anche sovrapporsi.