Border Radius Generator
Generate border radius
Generate border radius Wordt lokaal uitgevoerd in uw browser
border-radius: 12px;
About the
De Border Radius Generator stelt de vier hoeken van een kader onafhankelijk in, met een live preview, en geeft u de CSS. De volgorde van de steno is wat iedereen vergeet: het is linksboven, rechtsboven, rechtsonder, linksonder, met de klok mee vanaf linksboven. Eén waarde is van toepassing op alle vier de hoeken, twee waarden zijn van toepassing op de diagonale paren en vier waarden hebben beurtelings betrekking op elke hoek. Wanneer alle vier overeenkomen, verzendt de tool het formulier met één waarde, het formulier dat u eigenlijk het grootste deel van de tijd wilt hebben.
Where people use the
- Een straal afstemmen op een ontwerpspecificatie zonder te raden naar pixelwaarden.
- Alleen de bovenste hoeken van een kaart of modaal afronden.
- Het vormgeven van een pillenknop, die een straal heeft van de helft van de elementhoogte.
- Het vinden van de straal die een vierkante avatar in een cirkel verandert.
How to use the
- 1
Sleep een hoekschuifregelaar
Elke hoek heeft zijn eigen schuifregelaar van 0 tot 150 pixels. Het voorbeeldvak wordt rond terwijl u het verplaatst.
- 2
Houd de hoeken gekoppeld of ontkoppel ze
Als Link is ingeschakeld, worden alle vier de schuifregelaars samen verplaatst als u een schuifregelaar verplaatst. Schakel het uit om individuele hoeken vorm te geven, zo maak je een tekstballonstaart of een bladvorm.
- 3
Lees de CSS
Als ze alle vier overeenkomen, krijg je de steno met één waarde. Als ze verschillen, krijg je het volledige formulier met vier waarden, met de klok mee.
- 4
Overweeg in plaats daarvan een percentage
Een straal van 50 procent op een vierkant element geeft een cirkel. Verwissel de px-eenheid voor een percentage in uw stylesheet als dat is wat u nodig heeft.
Tips en beste praktijken
- Gebruik percentages als het formaat van het element wordt gewijzigd, pixels als dat niet het geval is.
- Een pillenknop heeft geen vaste straal; het is de helft van de hoogte, dus 9999px is het luie maar robuuste antwoord.
- Houd de straal consistent over een componentenset; het mixen van 4px, 6px en 8px ziet er toevallig uit.
Veelgestelde vragen
In welke volgorde staan de vier waarden?
Met de klok mee vanaf linksboven: linksboven, rechtsboven, rechtsonder, linksonder. Een handig ezelsbruggetje is dat het begint waar je begint met lezen en rondgaat als een wijzerplaat.
Wat betekenen twee of drie waarden?
Twee waarden stellen de diagonalen in: de eerste is linksboven en rechtsonder, de tweede is rechtsboven en linksonder. Drie waarden worden linksboven ingesteld, vervolgens rechtsboven en linksonder samen, en vervolgens rechtsonder.
Hoe maak ik een cirkel?
Gebruik 50 procent op een element dat al vierkant is. Het gebruik van pixels levert alleen een cirkel op als de straal gelijk is aan de helft van de breedte, die wordt verbroken op het moment dat het element groter of kleiner wordt.
Kan ik hoeken horizontaal en verticaal anders afronden?
De volledige syntaxis maakt een elliptische straal mogelijk die wordt geschreven als horizontale waarden, een schuine streep en vervolgens verticale waarden. Deze tool geeft de eenvoudigere uniforme vorm weer, dus voeg de schuine streepversie met de hand toe als je die vorm nodig hebt.
Waarom is mijn afgeronde hoek afgekapt?
Omdat de onderliggende inhoud niet aan het afgeronde vak wordt geknipt. Voeg een verborgen overloop toe aan het element, anders vertoont de afbeelding of achtergrond erin nog steeds vierkante hoeken.