Bordi arrotondati in CSS
- Come funziona il raggio del confine
- Come ottenere i bordi arrotondati in CSS
Come ottenere bordi arrotondati in CSS
I bordi arrotondati sono supportati dalla proprietà del raggio di frontiera del CSS. Per prima cosa esamineremo il funzionamento della proprietà del raggio di frontiera e poi forniremo alcuni esempi.
Come funziona il raggio di confine
La proprietà del raggio di frontiera è la proprietà stensa che comprende le proprietà indicate di seguito:
confine-top-left-radius, front-top-destra-radius, confine-left-bottom-radius e front-destra-bottom-radius-radius.
Principalmente il funzionamento del raggio di frontiera dipende dalla seguente sintassi:
Border-radius: value;Poiché la proprietà del raggio di frontiera è una proprietà abbreviata di quattro proprietà per bambini, quindi può accettare più del valore. Se vuoi avere un raggio diverso per vari bordi, puoi scegliere una delle seguenti possibilità.
Trovare tutti i bordi con le stesse dimensioni
Border-radius: value;Round in alto a sinistra/in basso a destra e in alto a destra/in basso a sinistra alle stesse dimensioni
Border-radius: value1 value2;Bordi in alto a sinistra, in alto a destra e in basso a destra
Border-radius: valore1 valore2 valore3;Se vuoi ottenere bordi arrotondati con dimensioni diverse
Border-radius: value1 value2 value3 value4;I prossimi esempi vengono praticati utilizzando la sintassi sopra fornita.
Esempio 1: ottenere i bordi arrotondati
Il codice fornito di seguito viene eseguito per ottenere i bordi arrotondati
Benvenuti in Linuxhint
Valey of Tech
Guide su HTML
Guide su CSS
Il codice è descritto come,
- All'interno del tag, le lezioni di Dour sono fatte chiamate "One", "Two", "Tre" e "Four"
- La classe "One" arrotonderà tutti i confini a 20px,
- La classe "Due" arrotonderà i bordi in alto/in basso a destra e in alto a destra/in basso a sinistra a 25px e 25px.
- La classe "tre" arrotola tre bordo in alto a sinistra, in alto a destra e in basso a destra
- La classe Dour arrotonderà tutti i confini a dimensioni diverse
- All'interno del tag, sono dichiarati quattro paragrafi che mostrano l'uso delle quattro classi CSS menzionate nel tag
L'immagine del codice è fornita di seguito
L'immagine dell'output sulla pagina Web mostrata di seguito:
Esempio 2: Ottieni il bordo arrotondato di scelta
L'esempio sopra esplode i confini nell'ordine predefinito. Ad esempio, se si utilizza un valore con la proprietà del raggio di confine, tutti i bordi sarebbero arrotondati, allo stesso modo, se vengono forniti tre valori, il bordo in basso a sinistra non verrà arrotondato.
Diciamo, non vogliamo completare il bordo in basso a destra. In tali situazioni, è necessario utilizzare quattro valori e utilizzare 0px al posto del bordo in basso a destra. Il seguente codice viene utilizzato per praticare l'esempio del bordo arrotondato sulla scelta:
Benvenuti in Linuxhint
Il codice sopra è descritto come:
- La proprietà Border-Radius è definita nel tag di stile in cui 0px viene utilizzato per saltare il bordo in basso a destra
- Lo stile di confine viene utilizzato per una migliore visibilità
- Nel corpo, è scritto un paragrafo su cui viene utilizzato il bordo arrotondato
L'immagine dell'editor di codice viene visualizzata di seguito:
Produzione
Dopo aver attraversato questo, avresti imparato il funzionamento del raggio di confine e delle sue proprietà associate in vari scenari.
Conclusione
La proprietà del raggio di frontiera facilita l'ottenimento dei bordi arrotondati in CSS. Il raggio di frontiera è la proprietà a corto e contiene funzionalità di quattro proprietà in esso. Questo articolo dimostra i possibili modi per ottenere i bordi arrotondati in CSS. Per fare ciò, abbiamo presentato il funzionamento della proprietà del raggio di frontiera in CSS. Inoltre, per una migliore comprensione, abbiamo anche dimostrato diversi esempi per portarti ai bordi arrotondati in CSS usando la proprietà.