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
-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
.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 : arvoJatketaan 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.