Denne bloggen vil diskutere:

• Hva er Outline Radius?
• Hvordan bruke Outline Radius Effect på HTML-element?

Hva er omrissradiusen?

« disposisjon ”-egenskapen brukes til å forme elementets omriss, men den kan ikke implementeres direkte. Derfor er den alternative metoden for å bruke radiuseffekten på en disposisjon å bruke en ' grense-radius ' CSS-egenskap. Den spesifiserer de avrundede hjørnene for konturer.

Hvordan bruke Outline Radius Effect på HTML-element?

For å bruke egenskapen omrissradius, gå gjennom de gitte instruksjonene.

Trinn 1: Bygg inn overskrifter

Til å begynne med, bygg inn overskriftene ved å bruke en hvilken som helst overskriftskode fra '

' til '

'. For eksempel har vi brukt '

' og '

”-koder for å bygge inn to forskjellige overskrifter i et HTML-dokument.

Trinn 2: Legg til den første div-beholderen

Etter det legger du til en beholder ved å bruke '

' stikkord. Sett også inn ' klasse ”-attributt og spesifiser navnet på klassen i henhold til ditt valg.

---

---

Trinn 3: Lag andre div-beholder

Opprett en annen ' div '-beholder ved å følge samme prosedyre:

< h1 stil = 'color:rgb(48, 10, 218)' > Linuxhint LTD UK < / h1 >

< h2 >

Forskjellige eksempler på kantradius for å lage hjørnene til en sirkulær kontur.

< / h2 >

< div klasse = 'boks1-div' >

Linuxhint gir det beste og mest unike innholdet for sine brukere.

< / div >

< div klasse = 'boks2-div' >

Det fungerer på flere kategorier.

< / div >

Utgangen av koden ovenfor er vist nedenfor:

Trinn 4: Angi omrisset av den første beholderen

Få tilgang til den første beholderen ved å bruke ' .box1-div ' klasse hvor ' . ' er en velger for å få tilgang til klassen:

.box1-div {

disposisjon : fast ;

bredde : 300 piksler ;

polstring : 15 piksler ;

margin : 25 piksler ;

}

Bruk deretter CSS-egenskapene nedenfor:

• « disposisjon ”-egenskapen brukes til å legge til en disposisjon rundt elementet. For eksempel er verdien satt som ' fast '.
• ' bredde ” spesifiserer størrelsen på elementet horisontalt.
• ' polstring ” brukes til å tildele plassen rundt elementets innhold.
• ' margin ” spesifiser mellomrommet på yttersiden av elementkanten.

Trinn 5: Angi omrisset av den andre beholderen

Nå, få tilgang til det andre elementet ved hjelp av sin respektive klasse ' .box2-div ':

.box2-div {

disposisjon : fast ;

grense-radius : 20 piksler ;

bredde : 300 piksler ;

polstring : 15 piksler ;

margin : 25 piksler ;

}

Bruk CSS-egenskapen ' grense-radius ” for å definere radiusen til elementet. Denne egenskapen lar deg legge til avrundede hjørner rundt elementet:

Det kan legges merke til at vi har lagt til konturradiuseffekten på HTML-elementet.

Konklusjon

« disposisjon-radius ' er ikke lenger tilgjengelig. Brukere kan bruke egenskapene for omrissradius ved hjelp av CSS-egenskapene 'kontur' og 'kantradius'. « disposisjon ' legger til en disposisjon rundt elementet, og ' grense-radius ” brukes spesielt til å style omrisset. Dette innlegget har demonstrert instruksjonene for å legge til konturradiuseffekten rundt elementet i HTML.