Kaip sukurti pusiau apskritimą naudojant CSS

“ elementą mūsų HTML failo body žymoje.

---

---

HTML

< div >< / div >

Dabar nustatykite tinkamus div matmenis, pvz., mes priskirsime „ plotis ' nuosavybės vertė kaip ' 180 pikselių “ ir „ aukščio 'turtas su verte' 90 piks “. Kitame žingsnyje nustatykite „ pasienio spindulys 'turto vertė' 12rem 12rem 0 0 “; kur pirmasis skaitmuo 12rem apkarpys viršutinę kairę div pusę, antrasis 12rem apkarpys viršutinę dešinę pusę, trečiasis ir ketvirtasis skaitmenys 0 iškirps visą apatinę div dalį. Galiausiai, norėdami suteikti apskritimui spalvą, naudokite „ fono spalva „turtas, kurio vertė“ violetinė “.

CSS

div {
plotis : 180 pikselių ;
aukščio : 90 piks ;
pasienio spindulys : 12 r 12 r 0 0 ;
fono spalva : violetinė ;
}

Išsaugokite HTML failą su minėtu kodu ir atidarykite jį savo naršyklėje:

Kaip matote, mes sėkmingai sukūrėme puslankį su CSS kraštinės spindulio savybe.

2 pavyzdys: Sukurkite pusiau apskritimą iš apačios naudodami CSS

Norėdami suformuoti puslankį iš apačios, nustatysime kraštinės spindulio savybių reikšmes kaip „ 0 0 12rem 12rem “, kur pirmosios dvi reikšmės reiškia viršutinį kairįjį ir viršutinį dešinįjį kraštinės spindulį. Mes nustatėme juos į 0, kad viršutinė div dalis visiškai išnyktų. Apačioje mes tik šiek tiek apkarpėme apatinę kairę ir apatinę dešinę puses, nustatydami reikšmes į 12rem.

CSS

div {
plotis : 180 pikselių ;
aukščio : 90 piks ;
pasienio spindulys : 0 0 12 r 12 r ;
fono spalva : violetinė ;
}

Išvestis

3 pavyzdys: Sukurkite pusiau apskritimą iš dešinės naudodami CSS

Norėdami sukurti CSS puslankį į dešinę, pirmiausia sureguliuokite konteinerio aukštį ir plotį, kad gautumėte tinkamą apskritimo formą. Nustatyti ' plotis “ kaip „ 90 piks “ ir „ aukščio “ kaip „ 180 pikselių ' šį kartą. Vėlgi, naudokite pasienio spindulio ypatybę su reikšme “ 0 12rem 12rem 0 “, kur pirmoji vertė 0 skirta viršutinei kairiajai pusei, paskutinė vertė 0 – apatinei kairiajai pusei, o antroji ir trečioji reikšmės pridedamos, kad būtų apkarpyta viršutinė dešinė ir apatinė dešinė pusė. Pritaikius šias vertes iš dešinės bus suformuotas puslankis.

CSS

div {
plotis : 90 piks ;
aukščio : 180 pikselių ;
pasienio spindulys : 0 12 r 12 r 0 ;
fono spalva : violetinė ;
}

Išvestis

4 pavyzdys: Sukurkite pusiau apskritimą iš kairės su CSS

Šį kartą nurodykite krašto spindulio ypatybę kartu su verte “ 12rem 0 0 12rem “; Pirmoji ir paskutinė reikšmė 12rem apkarpys viršutinę kairę ir apatinę kairę div, o nustačius antrąją ir trečiąją reikšmę į 0, išryškės viršutinė dešinė ir apatinė dešinė apskritimo pusės. Galų gale bus sukurtas mūsų kairysis puslankis.

CSS

div {
plotis : 90 piks ;
aukščio : 180 pikselių ;
pasienio spindulys : 12 r 0 0 12 r ;
fono spalva : violetinė ;
}

Išvestis

Mes pasiūlėme skirtingus puslankio su CSS kūrimo būdus.

Išvada

Norėdami sukurti puslankį, galime tiesiog naudoti CSS. pasienio spindulys ' nuosavybė. Puslankį galima sukurti iš vienos pusės į kitą, pavyzdžiui, į kairę, dešinę, viršuje ir apačioje. Sienos spindulio ypatybėje pradinė vertė yra viršutiniame kairiajame kampe, antroji – viršutiniame dešiniajame kampe, trečia – apatiniame dešiniajame kampe, o ketvirta – apatinei kairiajai pusei. Šiame rašte paaiškinta, kaip sukurti puslankį naudojant CSS.