CSS border-radius īpašības izpratne
CSS border-radius īpašība nosaka, cik mīksti vai asi būs tīmekļa lapas elementu stūri. Šis rīks ļauj vizuāli pielāgot kastes stūru noapaļojumu, izmantojot slīdņus, un uzreiz ģenerē atbilstošo CSS kodu jūsu dizainam. Sākotnējā slīdņa vērtība ir 24, kas nodrošina rezultātu border-radius: 24px;.
Četri stūru slīdņi pulksteņrādītāja virzienā kartējas šādā secībā:
- Augšējais kreisais
- Augšējais labais
- Apakšējais labais
- Apakšējais kreisais
Kad stūri ir sasaistīti, viens slīdnis ar etiķeti "Visi stūri" kontrolē visus četrus stūrus vienlaicīgi. Kad sasaiste ir izslēgta, ir pieejami četri atsevišķi slīdņi: "Augšējais kreisais", "Augšējais labais", "Apakšējais labais" un "Apakšējais kreisais". Katra slīdņa diapazons ir no 0 līdz 100.
Pikseļu un procentu mērvienību atšķirības
Izvēloties mērvienību, ir pieejamas divas opcijas: "px" (pikseļi) un "%" (procenti). Šī izvēle būtiski ietekmē to, kā noapaļojums reaģē uz elementa izmēru maiņu:
| Mērvienība | Darbības princips |
|---|---|
| Pikseļi (px) | Stūris tiek noapaļots par fiksētu lielumu neatkarīgi no elementa izmēra. |
| Procenti (%) | Stūris tiek noapaļots attiecībā pret lodziņu; horizontālais procents seko platumam, bet vertikālais — augstumam. |
Procentuālais noapaļojums ir noderīgs responsīvajā dizainā, kur elementi maina savu izmēru atkarībā no ekrāna platuma. Ja visi stūri procentu mērvienībās tiek iestatīti uz 50%, kvadrātveida elements pārvēršas par perfektu apli.
Eliptiskā režīma izmantošana sarežģītākām formām
Kad eliptiskais režīms ir izslēgts, katrs stūris ir ceturtdaļa apļa ar vienu rādiusu. Ieslēdzot eliptisko režīmu, katrs stūris iegūst atsevišķu horizontālo un vertikālo rādiusu, ko kontrolē slīdņi "Horizontāli" un "Vertikāli".
Šis režīms ļauj izveidot asimetriskas, mīkstas un organiskas "lāses" formas. CSS kodā šī struktūra tiek attēlota ar divu vērtību slīpsvītras formu (piemēram, horizontālie rādiusi / vertikālie rādiusi). Kad stūri atkal tiek padarīti apaļi, ģenerators automātiski atgriežas pie īsās CSS pieraksta formas.
Perfektu apļu un kapsulas formu veidošana
Lai sasniegtu konkrētus dizaina elementus, var izmantot šādas tehnikas:
- Perfekts aplis: Sasaistiet stūrus, pārslēdziet mērvienību uz procentiem un iestatiet vērtību 50%. Šis paņēmiens strādā, ja sākotnējais elements ir precīzs kvadrāts.
- Kapsulas formas poga (pill-shaped button): Saglabājiet pikseļu mērvienību un velciet stūri pāri pusei no pogas augstuma. Šādā veidā malas paliks pilnībā noapaļotas jebkurā elementa platumā.
Sagatavju loma ātrā izstrādē
Rīks piedāvā vairākas sagataves, kas ļauj ar vienu klikšķi iestatīt noteiktas formas:
- Ass: Atceļ jebkādu noapaļojumu.
- Noapaļots: Piešķir standarta mīkstos stūrus.
- Aplis: Iestata visus stūrus uz 50%, acumirklī izveidojot apli no kvadrāta.
- Lāse (Blob): Izmanto eliptisko režīmu, lai radītu dabisku, plūstošu formu.
- Lapa (Leaf): Noapaļo pretējos stūrus, veidojot lapas formu.
Ģenerētā CSS koda pielietošana
Zem vizuālā priekšskatījuma atrodas sadaļa "CSS", kurā tiek parādīts reāllaikā ģenerētais kods. Noklikšķinot uz pogas "Kopēt CSS", kods tiek saglabāts starpliktuvē, lai to varētu tieši ielīmēt jūsu stila lapā (stylesheet) vai elementa style atribūtā.
Datu apstrāde un privātums
Katrs stūris tiek zīmēts tieši jūsu pārlūkprogrammā. Nekas no tā, ko šeit iestatāt, netiek augšupielādēts BroBroGo.
Biežāk uzdotie jautājumi
Kā darbojas četri stūri un px pret %?
Četri slīdņi pulksteņrādītāja virzienā atbilst augšējam kreisajam, augšējam labajam, apakšējam labajam un apakšējam kreisajam stūrim. Pikseļos stūris tiek noapaļots par fiksētu lielumu; procentos tas tiek noapaļots attiecībā pret lodziņu — horizontālais procents seko platumam, bet vertikālais — augstumam, tāpēc 50% pārvērš kvadrātu par apli.
Ko dara eliptiskais režīms?
Kad šis režīms ir izslēgts, katrs stūris ir ceturtdaļa apļa ar vienu rādiusu. Ieslēdzot to, katrs stūris iegūst atsevišķu horizontālo un vertikālo rādiusu, kas ļauj veidot mīkstas, organiskas "lāses" formas. Ģenerators automātiski izveido divu vērtību slīpsvītras formu un atgriežas pie īsās formas, kad stūri atkal ir apaļi.
Kā izveidot perfektu apli vai kapsulas formu?
Sasaistiet stūrus, pārslēdzieties uz procentiem un iestatiet 50%: kvadrāts kļūs par apli. Lai izveidotu kapsulas formas pogu, saglabājiet pikseļus un velciet stūri pāri pusei no pogas augstuma — malas paliks pilnībā noapaļotas jebkurā platumā. Apli iestatītā sagatave veic pirmo gadījumu ar vienu klikšķi.