Tässä blogissa keskustellaan:

• Mikä on Outline Radius?
• Kuinka soveltaa ääriviivan sädevaikutusta HTML-elementtiin?

Mikä on ääriviivasäde?

' ääriviivat ”-ominaisuutta käytetään elementin ääriviivojen muotoilemiseen, mutta sitä ei voi toteuttaa suoraan. Siksi vaihtoehtoinen tapa käyttää sädevaikutusta ääriviivaan on käyttää ' raja-säde ”CSS-ominaisuus. Se määrittää ääriviivojen pyöristetyt kulmat.

Kuinka soveltaa ääriviivan sädevaikutusta HTML-elementtiin?

Käytä ääriviivasäde-ominaisuutta noudattamalla annettuja ohjeita.

Vaihe 1: Upota otsikot

Aluksi upota otsikot käyttämällä mitä tahansa otsikkotunnistetta '

”–”

”. Olemme esimerkiksi käyttäneet '

' ja '

” -tunnisteet kahden eri otsikon upottamiseksi HTML-dokumenttiin.

Vaihe 2: Lisää ensimmäinen div-säilö

Lisää sen jälkeen säilö käyttämällä '

' -tunniste. Lisää myös ' luokkaa ” attribuutti ja määritä luokan nimi valintasi mukaan.

---

---

Vaihe 3: Luo toinen div-säilö

Luo toinen ' div ”säiliö noudattamalla samaa menettelyä:

< h1 tyyli = 'väri:rgb(48, 10, 218)' > Linuxhint LTD UK < / h1 >

< h2 >

Erilaisia ​​esimerkkejä reunasäteestä ympyrän ääriviivan kulmien luomiseen.

< / h2 >

< div luokkaa = 'box1-div' >

Linuxhint tarjoaa käyttäjilleen parasta ja ainutlaatuisinta sisältöä.

< / div >

< div luokkaa = 'box2-div' >

Se toimii useissa luokissa.

< / div >

Yllä olevan koodin tulos näkyy alla:

Vaihe 4: Aseta ensimmäisen säiliön ääriviivat

Pääset ensimmäiseen säiliöön käyttämällä ' .box1-div 'luokka, jossa' . ” on valitsin, jolla pääset luokkaan:

.box1-div {

ääriviivat : kiinteä ;

leveys : 300 pikseliä ;

pehmuste : 15 kuvapistettä ;

marginaali : 25px ;

}

Käytä sitten alla lueteltuja CSS-ominaisuuksia:

• ' ääriviivat ” -ominaisuutta käytetään ääriviivan lisäämiseen elementin ympärille. Esimerkiksi sen arvoksi asetetaan ' kiinteä ”.
• ' leveys ” määrittää elementin koon vaakasuunnassa.
• ' pehmuste ” käytetään varaamaan tilaa elementin sisällön ympärille.
• ' marginaali ” määritä välilyönti elementin reunan ulkopuolelta.

Vaihe 5: Aseta toisen säiliön ääriviivat

Siirry nyt toiseen elementtiin vastaavan luokan avulla ' .box2-div ':

.box2-div {

ääriviivat : kiinteä ;

raja-säde : 20px ;

leveys : 300 pikseliä ;

pehmuste : 15 kuvapistettä ;

marginaali : 25px ;

}

Käytä CSS-ominaisuutta ' raja-säde ” elementin säteen määrittämiseen. Tämän ominaisuuden avulla voit lisätä pyöristettyjä kulmia elementin ympärille:

Voidaan huomata, että olemme onnistuneesti lisänneet ääriviivasäteen vaikutuksen HTML-elementtiin.

Johtopäätös

' ääriviiva-säde ' ei ole enää käytettävissä. Käyttäjät voivat käyttää ääriviivasäteen ominaisuuksia CSS:n 'outline'- ja 'border-radius'-ominaisuuksien avulla. ' ääriviivat ' lisää ääriviivat elementin ympärille ja ' raja-säde ” käytetään erityisesti ääriviivojen muotoiluun. Tämä viesti on osoittanut ohjeet ääriviivasäteen lisäämiseen elementin ympärille HTML:ssä.