CSS-grensradiusgenerator

De CSS Border Radius Generator is een visuele editor voor de CSS-grensstraaleigenschap U sleept een schuifregelaar voor elke hoek, bekijkt een voorbeeldelement in realtime en kopieert de exacte CSS die het produceert - geen gokpixelwaarden en herlaadt de pagina.

De eigenschap grensradius ziet er eenvoudig uit, maar heeft een compacte afkorting die mensen omhoog zet: één waarde rondt alle vier de hoeken af, twee waarden stellen de twee diagonalen in en vier waarden lopen met de klok mee vanaf de linkerbovenhoek. Met deze tool kun je elke hoek onafhankelijk instellen en vervolgens automatisch de kortste equivalente steno uitvoeren, zodat je CSS schoon blijft.

Alles draait in uw browser. Begin met een voorinstelling zoals kaart, pil, cirkel of klodder, stem elke hoek af, verander de eenheid tussen pixels en percentages en kopieer de declaratie. Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.

Percentages en pixels gedragen zich anders op alles wat niet vierkant is, en het verschil verrast mensen Een pixelradius is op elke hoek dezelfde curve, terwijl een percentage tegen elke as afzonderlijk wordt gemeten, dus 50 procent op een brede doos geeft eerder een ellips dan een cirkel Dat is de eigenschap die een rechthoek in een pil of een lensvorm verandert De specificatie beschermt je ook tegen onmogelijke geometrie: wanneer de stralen langs één rand optellen tot meer dan de lengte van die rand, schaalt de browser elke straal op het element proportioneel naar beneden in plaats van ze te overlappen, dus een grote waarde stopt stilletjes met groeien Output gebruikt de kortste geldige steno, daarom vallen vier gelijke hoeken in tot een enkel getal.

Als CSS-generator met randstraal is het handige dat hij de stenografie voor je doet Linksboven en Rechtsonder op 24 en Rechtsboven en Linksonder op 8 zetten, in px, en de uitvoer randstraal: 24px 8px leest; omdat de diagonale paren overeenkomen Laat rechtsonder op 0 vallen en het wordt de driewaarde 24px 8px 0px, aangezien Rechtsboven en Linksonder nog steeds overeenkomen Je kunt elk resultaat vóór het kopiëren tegen de preview controleren, waar een CSS-grensstraalgenerator voor is.