CSS piliulė / stadiono formos generatorius
Sukurkite CSS kraštinės spindulį vizualiai: keturi nepriklausomi kampiniai slankikliai pikseliais arba procentais, visų kampų nuoroda, skirta momentiniams apskritimams ir piliulei, taip pat natūralus dėmės režimas su atsitiktinių formų formomis.
Rezultatas
Šiame puslapyje atidaromas kraštinės spindulio generatorius, kuriame visi keturi kampai yra susieti ir nustumti į labai didelį spindulį: 999 pikseliai. Įprastame mygtuko dydžio stačiakampyje tokį didelį spindulį naršyklė nupjauna tiksliai iki pusės dėžutės aukščio, todėl gaunama visiškai suapvalinta piliulės arba stadiono forma, o ne kvadratas su šiek tiek užapvalintais kampais.
Štai kodėl tablečių mygtukams nereikia tikslios spindulio vertės, suderintos su kiekvieno mygtuko aukščiu – bet koks skaičius, patogiai didesnis nei pusė aukščio, suteikia identišką nukirptą rezultatą, todėl 999 pikseliai (ar net 9999 pikseliai) tapo neoficialiu bendruomenės santrumpa, reiškiančiu CSS „apvalyti iki galo“.
Pakeiskite langelio dydį pagal savo išdėstymą ir tas pats 999 pikseliai ir toliau gamins visą tabletę bet kuriame aukštyje, nes naršyklė visada automatiškai prispaudžiama prie pusės dėžutės. Nukopijuokite CSS, kai jis atrodo tinkamas, arba atsiekite kampus, kad sukurtumėte asimetrinę kapsulę.