Avrundede hjørner på rektangulært bilde ved bruk av bare CSS
Denne oppskrivningen vil diskutere metoden for å lage avrundede hjørner på rektangulære bilder ved hjelp av CSS.
Hvordan lage avrundede hjørner på et rektangulært bilde ved å bruke CSS bare?
For å lage de avrundede hjørnene på et rektangulært bilde ved hjelp av CSS, “Border-Radius”CSS -egenskap med verdien”50%”Brukes. For praktiske implikasjoner, prøv instruksjonene som er angitt nedenfor:
Trinn 1: Legg til en div beholder
Til å begynne med, legg til DIV -beholderen ved hjelp av "”Element. Sett deretter inn en "id”Eller“klasse”Attributt og spesifiser et navn for videre bruk.
Trinn 2: Legg til bilde
For å legge til bilder i beholderen, bruk "”Element som representerer selvforsynt innhold. Neste, legg til en "”Element og sett inn følgende attributt i“ IMG ”-merket:
- “src”Brukes for å legge til mediefilen til HTML -siden.
- Legg så til "bredde”Og“høyde”Attributter for å angi elementets størrelse.
Trinn 3: Legg til bildetekst for bilde
Etter det, sett inn “ Avrundet bilde Produksjon Trinn 5: Gjør bildet avrundet Få tilgang til bildet ved hjelp av "figur”Og angi forskjellige CSS -egenskaper som er nevnt i kodebiten nedenfor: Her: Produksjon Trinn 6: Bruk styling på bildetekst Få tilgang til klassen ved å bruke ".Bildetekst”Og bruk følgende CSS -egenskaper: I henhold til ovennevnte kodebit: Produksjon Det handler om å lage det avrundede hjørnet på et rektangulært bilde ved hjelp av CSS. Konklusjon For å lage de avrundede hjørnene på et rektangulært bilde, først, legg til bildet ved hjelp av "" stikkord. Få tilgang til bildet og bruk "Border-Radius”CSS -egenskap med verdien”50%”Som runder bildegrensen. Sett også “flyte" som "skjult”. Dette innlegget har forklart metoden for å lage avrundede hjørner på rektangulære bilder ved å bruke CSS bare.
Bredde: 200px;
Høyde: 150px;
overløp: skjult;
Margin: 30px 90px;
Border-Radius: 50%;
Margin: 0px 70px;
Border: 3px prikket plomme;
tekst-align: sentrum;
bakgrunnsfarge: RGB (209, 180, 236);