CSS HIFFRIRCH
Implementazione del semicerchio
Viene applicata una semplice sequenza di implementazione di tag HTML e CSS insieme alla proprietà del raggio di confine di CSS. Apri l'editor di testo e usa il seguente codice per disegnare un semicerchio su una pagina web. Per l'implementazione di un semicerchio in HTML e CSS, abbiamo usato CSS interni dichiarati all'interno del tag con i tag di apertura e chiusura. Inizia con i tag HTML, apri il tag Head. Quindi nel primo passaggio, abbiamo dato il titolo alla pagina. Questo nome del titolo apparirà nella parte superiore della scheda nel browser al momento dell'esecuzione. Dopo aver chiuso il tag del titolo, dichiareremo il tag di stile. Innanzitutto, dichiareremo il margine e l'imbottitura della forma.
Differenza b/n margine e imbottitura
Il margine è lo spazio intorno all'oggetto che si desidera creare. Questa proprietà viene utilizzata per la regolazione dell'oggetto sulla pagina, per spostarsi a sinistra o a destra, ecc. È un'area trasparente non ha colore di sfondo. Un margine circonda la forma da tutti e 4 i lati.
L'imbottitura è la parte presente tra l'oggetto creato e il contenuto all'interno dell'oggetto. Questo contenuto può essere una forma, un testo, ecc. La proprietà di imbottitura specifica il modo in cui un oggetto appare all'interno del contenitore. Questo contenitore contiene anche un colore di sfondo. L'aumento o la riduzione della dimensione dell'imbottitura influisce sulle dimensioni del contenuto al suo interno.
Quindi, qui all'interno del codice di stile, abbiamo dichiarato sia margine che imbottitura come 0. Ciò significa che useremo manualmente i codici di regolazione dichiarando la proprietà dell'altezza e della larghezza della forma. È necessario dichiarare queste proprietà come 0 invece di eliminarle dal codice perché è considerata auto se non dichiarata come zero.
*Margine: 0;
Imbottitura: 0;
La terza proprietà relativa alla forma è il colore di sfondo bianco. Questo è il colore predefinito. Se non lo parli, sarà sempre bianco. Successivamente, useremo lo stile del div. Div è un contenitore per contiene alcuni elementi al suo interno. Non ha alcun effetto sul layout né sul contenuto fino a quando non ne forniamo alcun stile. Qui, abbiamo usato molto effetto per il contenitore Div. Tutti gli effetti della forma sono applicati al contenitore Div per le regolazioni. La posizione del contenitore è considerata assoluta.
Le due proprietà di base di forma sono la posizione e la direzione della forma. Per regolare la forma, useremo gli attributi superiore e sinistra. "Top" deciderà la distanza della forma dal bordo superiore della pagina web. La parte sinistra mostra la distanza della forma dal bordo sinistro della pagina. Entrambe le proprietà sono prese in percentuale.
Top: 20%;A sinistra: 10%;
La funzione di trasformazione è una potente proprietà che viene utilizzata per ruotare, inclinarsi, piegare o tradurre l'oggetto. Una delle funzionalità più utilizzate è la funzione "traduci" che viene utilizzata per spostare l'oggetto da un posto all'altro. Nella creazione di un semicerchio, abbiamo usato due valori di spostamento da sinistra e la parte superiore in percentuale. Abbiamo preso entrambi i valori con il segno negativo per l'adeguamento.
Trasformazione: traduzione (-50%, -50%)Ora useremo alcuni effetti sulla forma creando una proprietà come la sua altezza e la larghezza. Entrambe le proprietà sono prese in pixel.
Altezza: 100px;Larghezza: 200px;
Qual è la proprietà del raggio di frontiera e perché viene utilizzata?
Il raggio del bordo è la spina dorsale della creazione di un cerchio o un semicerchio in HTML. Questa proprietà svolge un ruolo vitale per arrotondare gli angoli dei bordi del bordo di un oggetto. Giocare con il confine e girarli verso il centro è un cerchio perfetto. I parametri possono essere di 4 valori. La proprietà del raggio di confine viene utilizzata per dare il valore del raggio del bordo. I 4 valori sono le proprietà di lunghezza, percentuale, iniziale e eredità.
Questi 4 valori sono specificati in un ordine specifico per formare un raggio di bordo:
- A sinistra in alto
- In alto a destra
- In basso a destra
- In basso a sinistra
Il raggio del bordo può contenere tutti questi valori o quello personalizzato rimuovendo qualsiasi valore. Se il valore della parte inferiore sinistra viene rimosso, il valore sarà il valore in alto a destra della forma.
Raggio di confine: 150px 150px 0 0;Per fare un semicarcolo, abbiamo preso 2 valori come 150px e gli altri due sono dichiarati zero. Se prendiamo tutti i valori come 150 o qualsiasi altro numero più vicino ad esso, la forma risultante sarebbe un cerchio completo o un ovale. Dopo quell'allineamento del raggio, abbiamo assegnato il colore alla forma rossa. Ora chiuderemo anche la sezione di stile e la sezione della testa.
All'interno della sezione del corpo del codice, dichiariamo un div, solo l'apertura e i tag di chiusura per Div sono usati qui. Tutto lo styling è dichiarato nella sezione di stile di CSS.
Ora salveremo il codice nell'editor di testo. Assicurati che il file formato debba essere salvato con il nome con un'estensione di HTML. Ad esempio, campione.HTML è il file, su cui stiamo lavorando.
Per eseguire il file di testo, aprire il file selezionando l'opzione di "Open-With" e selezionando qualsiasi browser a tua scelta. In questo modo, l'icona del file verrà sostituita con l'icona del browser.
Vedrai che un semicerchio è formato con colore rosso e vengono eseguiti gli stessi allineamenti che avevamo dichiarato.
Conclusione
Un'implementazione di un semicerchio in CSS viene condotta dando una breve introduzione a HTML e CSS. Un semplice editor di testo e un browser sono responsabili dell'esecuzione di tag HTML e CSS nel file. Abbiamo usato CSS interni per questo scopo. Inoltre, qui è definita anche un'importante proprietà CSS che è la proprietà. Seguendo questa funzione si forma un cerchio, dobbiamo solo personalizzarne alcuni valori. Tutti gli effetti sono dichiarati nella sezione CSS, la sezione del corpo contiene solo il contenitore Div.