Tatalakayin ng blog na ito ang:

• Ano ang Outline Radius?
• Paano Mag-apply ng Outline Radius Effect sa HTML Element?

Ano ang Outline Radius?

Ang ' balangkas Ang ” property ay ginagamit para hubugin ang outline ng elemento, ngunit hindi ito direktang maipapatupad. Samakatuwid, ang alternatibong paraan upang mailapat ang epekto ng radius sa isang balangkas ay ang paggamit ng ' hangganan-radius ” pag-aari ng CSS. Tinutukoy nito ang mga bilugan na sulok para sa mga balangkas.

Paano Mag-apply ng Outline Radius Effect sa HTML Element?

Para gamitin ang outline radius property, dumaan sa ibinigay na mga tagubilin.

Hakbang 1: I-embed ang Mga Heading

Sa una, i-embed ang mga heading sa pamamagitan ng paggamit ng anumang heading tag mula sa '

'sa'

”. Halimbawa, ginamit namin ang '

'at'

” na mga tag para sa pag-embed ng dalawang magkaibang heading sa isang HTML na dokumento.

Hakbang 2: Idagdag ang First div Container

Pagkatapos nito, magdagdag ng lalagyan gamit ang “

” tag. Gayundin, ipasok ang ' klase ” attribute at tukuyin ang pangalan para sa klase ayon sa iyong pinili.

---

---

Hakbang 3: Gumawa ng Second div Container

Lumikha ng isa pang ' div ” container sa pamamagitan ng pagsunod sa parehong pamamaraan:

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

< h2 >

Iba't ibang mga halimbawa para sa border-radius upang lumikha ng mga sulok ng isang balangkas na pabilog.

< / h2 >

< div klase = 'box1-div' >

Nagbibigay ang Linuxhint ng pinakamahusay at pinakanatatanging nilalaman para sa mga gumagamit nito.

< / div >

< div klase = 'box2-div' >

Gumagana ito sa maraming kategorya.

< / div >

Ang output ng code sa itaas ay ipinapakita sa ibaba:

Hakbang 4: Itakda ang Outline ng Unang Container

I-access ang unang lalagyan sa pamamagitan ng paggamit ng “ .box1-div 'klase kung saan ang' . ” ay isang tagapili upang ma-access ang klase:

.box1-div {

balangkas : solid ;

lapad : 300px ;

padding : 15px ;

margin : 25px ;

}

Pagkatapos, ilapat ang mga katangian ng CSS na nakalista sa ibaba:

• Ang ' balangkas Ang ” property ay ginagamit para magdagdag ng outline sa paligid ng elemento. Halimbawa, ang halaga nito ay itinakda bilang ' solid ”.
• “ lapad ” ay tumutukoy sa laki ng elemento nang pahalang.
• “ padding ' ay ginagamit para sa paglalaan ng espasyo sa paligid ng nilalaman ng elemento.
• “ margin ” tukuyin ang espasyo sa panlabas na bahagi ng hangganan ng elemento.

Hakbang 5: Itakda ang Balangkas ng Ikalawang Lalagyan

Ngayon, i-access ang pangalawang elemento sa tulong ng kani-kanilang klase ' .box2-div ”:

.box2-div {

balangkas : solid ;

hangganan-radius : 20px ;

lapad : 300px ;

padding : 15px ;

margin : 25px ;

}

Ilapat ang CSS property ' hangganan-radius ” para sa pagtukoy sa radius ng elemento. Nagbibigay-daan sa iyo ang property na ito na magdagdag ng mga bilugan na sulok sa palibot ng elemento:

Mapapansing matagumpay nating naidagdag ang outline radius effect sa HTML element.

Konklusyon

Ang ' balangkas-radius ” ay hindi na magagamit. Maaaring ilapat ng mga user ang mga property ng outline radius sa tulong ng CSS na 'outline' at 'border-radius' na mga property. Ang ' balangkas ' nagdaragdag ng balangkas sa paligid ng elemento, at ang ' hangganan-radius ” ay partikular na ginagamit para sa pag-istilo ng balangkas. Ang post na ito ay nagpakita ng mga tagubilin para sa pagdaragdag ng outline radius effect sa paligid ng elemento sa HTML.