Angoli arrotondati sull'immagine rettangolare usando solo CSS
Questo articolo discuterà il metodo per creare angoli arrotondati su immagini rettangolari usando CSS.
Come realizzare angoli arrotondati su un'immagine rettangolare usando solo CSS?
Per creare gli angoli arrotondati su un'immagine rettangolare usando CSS, il “raggio di confine"Proprietà CSS con il valore"50%"È utilizzato. Per implicazioni pratiche, prova le istruzioni indicate di seguito:
Passaggio 1: aggiungi un contenitore di div
Inizialmente, aggiungi il contenitore Div con l'aiuto di ""Elemento. Quindi, inserire un “id" O "classe"Attributo e specificare un nome per un ulteriore utilizzo.
Passaggio 2: aggiungi l'immagine
Allo scopo di aggiungere immagini nel contenitore, utilizzare il “"Elemento che rappresenta il contenuto autonomo. Successivamente, aggiungi un ""Elemento e inserire il seguente attributo all'interno del tag" IMG ":
- IL "src"È utilizzato per l'aggiunta del file multimediale alla pagina HTML.
- Poi aggiungi "larghezza" E "altezza"Attributi per impostare la dimensione dell'elemento.
Passaggio 3: Aggiungi didascalia per l'immagine
Dopodiché, inserisci " Immagine arrotondata Produzione Passaggio 5: fai arrotondare l'immagine Accedi all'immagine con l'aiuto di "figura"E imposta varie proprietà CSS menzionate nello snippet di codice seguente: Qui: Produzione Passaggio 6: applicare lo stile sulla didascalia Accedi alla classe utilizzando il ".didascalia"E applica le seguenti proprietà CSS: Secondo lo snippet di codice sopra dato: Produzione Si tratta di fare l'angolo arrotondato su un'immagine rettangolare usando CSS. Conclusione Per creare gli angoli arrotondati su un'immagine rettangolare, aggiungi prima l'immagine con l'aiuto di ""Tag. Quindi, accedi all'immagine e applica il “raggio di confine"Proprietà CSS con il valore"50%"Questo arrotonda il bordo dell'immagine. Inoltre, imposta il "overflow" COME "nascosto". Questo post ha spiegato il metodo per creare angoli arrotondati su immagini rettangolari usando solo CSS.
larghezza: 200px;
Altezza: 150px;
Overflow: nascosto;
Margine: 30px 90px;
raggio di frontiera: 50%;
Margine: 0px 70px;
Bordo: prugna punteggiata 3px;
Testo-align: centro;
Background-color: RGB (209, 180, 236);