Bet kuriam elementui galite suteikti „užapvalintus kampus“, pritaikydami border-radiusper CSS. Jūs pastebėsite tik tuo atveju, jei pasikeis spalva. Pvz., Jei elemento fono spalva ar kraštinė skiriasi nuo elemento, kurį jis baigė. Paprasti pavyzdžiai:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )Tai tikrai nebėra būtina, tačiau norint užtikrinti geriausią naršyklės palaikymą, priešdėlį turėtumėte naudoti su -webkit-ir -moz-:
.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )Atkreipkite dėmesį į šių ypatybių eiliškumą: pardavėjo priešdėliai pateikiami pirmiausia, o nepriekaištinė „spec“ versija - paskutinė. Tai yra teisingas būdas tai padaryti. Pasienio spindulys yra ypač geras pavyzdys, kodėl mes taip darome. Šiek tiek sudėtingesnėje naudojimo versijoje border-radius(kai perduodate dvi reikšmes, o ne vieną), senesnis -webkit-pardavėjo priešdėlis padarytų visai ką kitą nei „spec“. Taigi, jei aklai nukopijuosime / įklijuosime tas pačias reikšmes į visas tris ypatybes, naršyklėje galėtume pamatyti skirtingus rezultatus. Sužinokite daugiau apie šį scenarijų. Norint užtikrinti ilgalaikį nuoseklumą, geriausia paskutinę nurodyti „spec“ versiją.
Šiais laikais yra gana realu mesti priešdėlius ir tiesiog naudoti krašto spindulį, kaip aptarta čia.
Jei elementas turi vaizdo foną, jis natūraliai bus apkarpytas užapvalintame kampe:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )Kartais galite pamatyti background-color„nutekėjimą“ už sienos, kai border-radiusyra. (matyti). Norėdami to išvengti, naudokite fono klipą:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )Turėdamas tik vieną vertę, border-radiustas pats bus visuose keturiuose elemento kampuose. Bet taip neturi būti. Kiekvieną kampą galite nurodyti atskirai, jei norite:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )Taip pat galite nurodyti dvi ar tris reikšmes. MDN tai gerai paaiškina:
Jei nustatyta viena reikšmė, šis spindulys taikomas visiems 4 kampams .
Jei nustatytos dvi reikšmės, pirmoji taikoma top-leftir bottom-rightkampui, antroji taikoma top-rightir bottom-leftkampui.
Keturi vertės taikomos top-left, top-right, bottom-right, bottom-leftkampe ta pačia tvarka.
Trys vertės: antroji reikšmė taikoma top-rightir bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )Taip pat galite nurodyti spindulius, kuriais kampas suapvalintas. Kitaip tariant, apvalinimas neturi būti visiškai apskritas, jis gali būti elipsinis. Tai daroma naudojant pasvirąjį brūkšnį („/“) tarp dviejų verčių.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Pastaba: „ Firefox“ palaiko elipsines kraštines tik 3.5+ ir senesnėse „WebKit“ naršyklėse (pvz., „Safari 4“) neteisingai „40px 10px“ traktuoja kaip „40px / 10px“.
Vertę galite nurodyti border-radiusprocentais. Tai ypač naudinga, kai norite sukurti apskritimo ar elipsės formą, tačiau ją galima naudoti bet kada, kai norite, kad krašto spindulys būtų tiesiogiai susijęs su elementų pločiu.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Pastaba: „Safari“ krašto spindulio procentinės vertės palaikomos tik 5.1 ar naujesnėse versijose. „Opera“, palaikoma tik 11.5 ir naujesnių versijų.
Čia pateikiama kiekviena nuosavybė su pardavėjo priešdėliais:
.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )Pastaba: kiekviena iš šių reikšmių taip pat gali turėti tarpais atskirtą vertę, pvz., „5 taškų 10 taškų“, kuri stygiuojant (horizontalus spindulys (tarpas) vertikalus spindulys) elgiasi kaip atskirta brūkšniu.
Ištekliai
- Greitas įrankis krašto spindulio kodui generuoti
- „Mozilla Docs“
- Ieškant tobulo spindulio
- Ar mums jau reikia įvesti krašto spindulį?
Čia yra nedidelis dalykas, kurį reikia žaisti su skirtingomis savybėmis ir vertybėmis:
Žiūrėkite „Chris Coyier“ (@chriscoyier) „Pen“ visą sienos spindulį „CodePen“.
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 4 * | 3 * | 9 | 12 | 3,1 * |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 2,1 * | 3,2 * |
