CodeKitHubKas ir šis rīks?
border-radius ir CSS īpašība, kas noapaļo elementa stūrus. Rakstot ar roku, tā prasa četras vērtības noteiktā secībā — augšējais kreisais, augšējais labais, apakšējais labais, apakšējais kreisais — ko viegli sajaukt, it īpaši, kad četri stūri atšķiras.
Šis rīks novērš minēšanu: pārvietojiet slīdni, vērojiet, kā stūris noapaļojas tiešraides priekšskatījumā, un nolasiet precīzu CSS no ģenerētā koda lodziņa. Viens fiksācijas pārslēgs pārslēdz starp vienmērīgu rādiusu (visi četri stūri vienādi, biežākais gadījums) un četriem neatkarīgiem slīdņiem organiskām, asimetriskām formām.
Kāpēc to izmantot?
- Tiešraides priekšskatījums atjaunojas tūlītēji, velkot — nekāda CSS rediģēšana un atsvaidzināšana, lai redzētu rezultātu.
- Vienas klikšķa fiksācija biežajam gadījumam "vienāds rādiuss katram stūrim"; atslēdziet tabletes pogām, runas burbuļiem un blob formām.
- Izvada saīsināto vienas vērtības formu, kad visi stūri sakrīt, vai pilno četru vērtību formu, kad tie nesakrīt — abos gadījumos gatavs kopēt un ielīmēt.
- Darbojas pilnībā jūsu pārlūkā. Nekas, ko ievadāt, netiek nekur sūtīts.
- Bez maksas, bez reģistrācijas, darbojas mobilajā ierīcē.
Kā to lietot
- Atstājiet atzīmētu "fiksēt visus stūrus" un velciet jebkuru slīdni, lai iestatītu vienu vienmērīgu rādiusu visai kastei.
- Noņemiet fiksāciju, lai kontrolētu katru stūri neatkarīgi — noderīgi tabletes formām, asaru formām un asimetriskām kartēm.
- Vērojiet, kā priekšskatījuma kaste atjaunojas tiešraidē, pielāgojot katru slīdni.
- Nokopējiet ģenerēto CSS no koda lodziņa un ielīmējiet to savā stila lapā.
Piemērs
Ievade
Augšējais kreisais: 40px, Augšējais labais: 8px, Apakšējais labais: 40px, Apakšējais kreisais: 8pxIzvade
border-radius: 40px 8px 40px 8px;Neatbilstoši pretējie stūri šādi rada lapas vai ziedlapiņas silueta efektu — bieži izmantots kartīšu un nozīmīšu dizainā.
px vai % — kuru vienību izmantot?
Šis ģenerators izvada pikseļu vērtības, kas ir pareizais noklusējums lielākajai daļai UI darba: pogām, kartītēm un ievades laukiem, kur vēlaties fiksētu, paredzamu stūra rādiusu neatkarīgi no elementa izmēra.
Procenti uzvedas savādāk — tie ir relatīvi pret paša elementa platumu un augstumu, tāpēc 50% rādiuss uz kvadrātiska elementa rada perfektu apli, bet uz nekvadrātiska elementa rada elipsi. Ja vēlaties šo efektu (avatāri, blob formas, kas mērogojas ar konteineru), ņemiet ģenerēto CSS un pārmainiet px vērtības uz % vērtību ar roku — piemēram, border-radius: 50% pārvērš jebkuru kvadrātisku kasti par apli.
Biežākie border-radius modeļi
- Noapaļota kartīte: visi stūri vienādi, aptuveni 8–16px UI komponentiem.
- Tabletes poga: iestatiet rādiusu uz pusi no elementa augstuma (vai vienkārši izmantojiet 9999px, kas piesaista pilnu tableti neatkarīgi no augstuma).
- Apļa avatārs: border-radius: 50% uz kvadrātiska (vienāds platums un augstums) elementa.
- Runas burbulis: trīs stūri noapaļoti, viens ass — iestatiet trīs slīdņus augstus un vienu uz 0.
- Lapas / ziedlapiņas forma: pretējie stūri sakrīt, blakusesošie stūri atšķiras — piemēram, augšējais kreisais un apakšējais labais abi lieli, augšējais labais un apakšējais kreisais abi mazi.
Apvienošana ar ēnu
Noapaļoti stūri reti parādās vieni — kartītēm un pogām parasti nepieciešama arī neliela ēna dziļumam. Izmantojiet Box Shadow ģeneratoru, lai noregulētu krītošo ēnu, un pielietojiet abas ģenerētās CSS deklarācijas tam pašam elementam.
Biežāk uzdotie jautājumi
Kāda ir atšķirība starp border-radius un stūru secību?
CSS saīsinājums vienmēr seko secībai augšējais kreisais, augšējais labais, apakšējais labais, apakšējais kreisais — pulksteņrādītāja virzienā, sākot no augšējā kreisā. Šī rīka četri slīdņi ir atbilstoši marķēti, tāpēc jums nekad pašam nav jāatceras secība.
Vai varu izmantot dažādas vienības katram stūrim?
Jā, reālajā CSS varat sajaukt px, %, em un rem starp stūriem, lai gan tas praksē ir reti. Šis rīks vienkāršības labad ģenerē vienotas px vērtības — pārmainiet jebkuru atsevišķu vērtību uz % vai citu vienību tieši savā stila lapā, ja jums nepieciešamas jauktas vienības.
Kāpēc border-radius: 50% dažreiz veido ovālu, nevis apli?
Tāpēc, ka procenti ir relatīvi pret katru asi neatkarīgi — horizontālais rādiuss ir procenti no elementa platuma, vertikālais rādiuss ir procenti no tā augstuma. Uz kvadrātiska elementa (vienāds platums un augstums) tas rada perfektu apli; uz taisnstūra tas rada elipsi.
Vai border-radius darbojas arī uz fona attēliem un apmalēm?
Jā — border-radius apgriež elementa fonu, apmali un (mūsdienu pārlūkos) tā box-shadow uz noapaļoto formu. Tas neapgriež bērnu saturu, kas pārsniedz robežas, ja vien vecākam elementam nav iestatīts arī overflow: hidden.
Vai ir ierobežojums, cik liels var būt rādiuss?
Nav stingra ierobežojuma — ja rādiuss pārsniedz pusi no elementa platuma vai augstuma, pārlūki to piesaista tā, lai divas šīs puses līknes precīzi satiktos vidū, kā kvadrāts kļūst par perfektu apli vai tabletes formu.
Kā izveidot tabletes formu vai perfektu apli?
Tabletes (kapsulas) formai iestatiet rādiusu vismaz uz pusi no elementa augstuma — bieži izmantotais triks ir border-radius: 9999px, kas darbojas jebkurā augstumā, jo pārlūks automātiski ierobežo līkni. Perfektam aplim nepieciešamas divas lietas: vienāds platums un augstums, plus border-radius: 50%.