CSS apskritimo generatorius – 50 % kraštinės spindulio
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 su visais keturiais susietais kampais ir nustatyta 50 % vertės, kuri paverčia langelį apskritimu, naudojant tik CSS. Sąžiningai: ant kvadratinės dėžės tai sudaro tobulą apskritimą, bet stačiakampėje dėžutėje tie patys 50% sukuria stadioną primenančią elipsę, nes kiekvienas kampas tik apvalina savo ketvirtį.
Šis skirtumas yra svarbus, nes 50 % kraštinės spindulio yra vienintelis labiausiai paplitęs būdas sukurti apskritus pseudoportretus, piktogramų ženklelius ir būsenos taškus CSS – daug paprasčiau nei nukirpti apskritimą su kauke arba nupiešti apskritimą SVG formatu, be to, jis išlieka aiškus bet kokio dydžio, nes tai yra santykinis procentas, o ne fiksuotas pikselių spindulys.
Pakeiskite langelį į fiksuoto kvadrato dydį savo CSS, kad užfiksuotumėte tobulą apskritimą, arba palikite jį stačiakampį, kad gautumėte tabletę primenančią formą – bet kuriuo atveju kampai čia lieka susieti, todėl vienu slankikliu visi keturi bus sinchronizuojami, kol kopijuojate gautą CSS.