Kulmien pyöristäminen CSS:n avulla

Kulmien Pyoristaminen Css N Avulla



Tyyli on tärkeä osa HTML-verkkosivustojen kehitystä, ja CSS tarjoaa erilaisia ​​tyylejä HTML-elementeille; yksi niistä on luoda reunus minkä tahansa elementin ympärille. Useimmiten sitä käytetään erottelemaan osia käyttämällä reunamuotoja, kuten kiinteä, katkoviiva, katkoviiva ja kaksinkertainen.

Tämän oppaan tarkoituksena on selittää, kuinka pyöreät kulman reunat luodaan. Tätä varten meidän on ensin tiedettävä ' rajaa ” omaisuutta. Joten, aloitetaan!

Mikä on 'border' -ominaisuus CSS:ssä?

Jos haluat luoda reunuksen elementin ympärille, sinun on käytettävä ' rajaa ” omaisuutta. Käyttämällä tätä ominaisuutta voit asettaa ' tyyli ”, “ väri- ”, ja ” leveys ”rajasta.







Syntaksi



Rajaominaisuuden syntaksi annetaan seuraavasti:



rajaa : leveyden tyylinen väri

Tässä on kuvaus yllä annetuista arvoista:





  • leveys: Sitä käytetään reunan leveyden asettamiseen.
  • tyyli: Sitä käytetään reunatyylin asettamiseen, kuten pisteviiva, katkoviiva, kiinteä tai kaksinkertainen.
  • väri: Se määrittää reunuksen värin.

Tässä on esimerkki, jossa toteutamme ' rajaa ” omaisuutta.

Kuinka luoda reunus CSS:n avulla?

Luo reunus lisäämällä ensin elementti HTML-tiedostoon. Tätä varten luomme

ja määritämme ' kulma ”luokka siihen. Tämän jälkeen lisäämme otsikon ja kappaleen

- ja

-tageilla:



< kehon >

< div luokkaa = 'kulma' >

< h1 > Linux-vinkki < / h1 >

< s > Pyöristetyt kulmat CSS:ssä < / s >

< / div >

< / kehon >

Seuraavaksi siirrymme CSS-osioon.

Täällä ' .kulma ” käytetään pääsyyn

:lle määritettyyn luokkaan. Tämän jälkeen luomme reunuksen käyttämällä ' rajaa ' -ominaisuutta ja määritä leveyden, tyylin ja värin arvoiksi ' 4px ”, “ kiinteä ”, ja ” rgb(248; ​​6; 107) ”, vastaavasti. Lisäksi lisäämme leveyden ' 250 pikseliä ', korkeus' 150 pikseliä ' ja taustaväri ' rgb(234; 0; 255) ' div:lle:



.kulma {

rajaa : 4px kiinteä rgb ( 248 , 6 , 107 ) ;

leveys : 250 pikseliä ;

korkeus : 150 pikseliä ;

taustaväri : rgb ( 2. 3. 4 , 0 , 255 ) ;

}

Kun olet ottanut yllä mainitun koodin käyttöön, siirry HTML-tiedostoon ja suorita se. Näet seuraavan tuloksen:

Nyt siirrymme seuraavaan osaan, jossa luomme neliön reunan pyöreän kulman reunaan.

Kuinka pyöristää kulmaa CSS:n avulla?

Pyöreän kulman reunan luomiseksi ' raja-säde ” käytössä on omaisuus, jossa voit asettaa kulman säteen mieltymystesi mukaan.

Syntaksi

Border-radius-ominaisuuden syntaksi on annettu alla:

raja-säde : arvo

Jatketaan edellistä esimerkkiä ja asetetaan reunan säde pyöreiden kulmien saavuttamiseksi.

Esimerkki

Sisään ' .kulma CSS-tiedoston luokka, aseta arvo raja-säde ' omaisuutta nimellä ' 30 kuvapistettä ':

raja-säde : 30 kuvapistettä ;

Kun yllä oleva rivi lisätään, saat seuraavan tulosteen:

Yllä annettu tulos tarkoittaa, että reunat on onnistuneesti muutettu pyöreiksi kulmiksi border-radius ominaisuuden vuoksi.

Johtopäätös

CSS:ssä ' raja-säde ” omaisuutta hyödynnetään rajojen kulman muuttamiseksi. Käyrän muoto muuttuu annetun säteen arvon mukaan. Mainitun ominaisuuden avulla voit asettaa kulman säteen valintasi mukaan. Tässä artikkelissa olemme selittäneet, kuinka kulman reunat pyöristetään border-radius-ominaisuuden avulla esimerkin avulla.