border-radius is een van de eerste CSS eigenschappen die de meeste mensen leren en een van de laatste die ze volledig begrijpen Het is eenvoudig om alle vier de hoeken van een kaart af te ronden met 12 pixels Dan moet een knop een pil zijn op elke breedte, een avatar moet een cirkel zijn, een chat bubble heeft één scherpe hoek nodig, en plotseling de steno volgorde, het verschil tussen 50% en 999px, en een straal die " stopt met groeien" alle materie.
In deze handleiding wordt uitgelegd hoe de eigenschap werkt vanaf de specificatie omhoog: wat elke waardetelling betekent, hoe percentages verschillen van pixels, hoe browsers stralen schalen die te groot zijn, hoe gemeenschappelijke vormen te bouwen en waarom afgeronde hoeken soms niet verschijnen De voorbeelden worden gecontroleerd aan de hand van de CSS-grensradiusgenerator, die live een voorbeeld van elke hoek bekijkt en de kortste geldige steno uitvoert. Het is een van de CSS-tools op Toolz.
tl;dr:
border-radiusrondt een element af' s hoeken Eén waarde stelt alle vier de hoeken in, twee waarden stellen de paren linksboven/rechtsonder en rechtsboven/linksonder in, drie waarden linksboven, dan rechtsboven en linksonder samen, dan rechtsonder en vier waarden lopen van linksboven met de klok mee Pixelstralen zijn vaste curven; percentages worden afzonderlijk gemeten tegen breedte en hoogte, dus50%maakt alleen een cirkel op een vierkant, als stralen langs een zijde optellen tot meer dan de zijde schaalt de browser elke straal proportioneel omlaag De generator voor grensradius behandelt de steno voor u, client-side, gratis, geen aanmelding.
Wat doet de CSS-grensstraaleigenschap?
de border-radius eigenschap rondt de buitenste hoeken van een element af' s randkast Elke hoek wordt een kwart van een ellips met een horizontale straal en een verticale straal Wanneer beide stralen gelijk zijn, is de hoek een kwart cirkel.
Het is gedefinieerd in het W3C CSS Achtergronden en Grenzen Module Niveau 3, en wordt al meer dan tien jaar zonder voorvoegsel ondersteund in elke grote browser, dus er zijn geen leveranciersvoorvoegsels nodig.
De afronding heeft invloed op meer dan de grenslijn Het element' s achtergrond is geknipt aan de ronde vorm, box-shadow volgt de curve, en in moderne browsers ook outline. Inhoud in het element wordt niet geknipt, tenzij u toevoegt overflow: hidden, wat de meest voorkomende reden is dat afgeronde hoeken lijken te falen.
Hoe werkt de steno van de grensstraal?
border-radius is een afkorting voor vier langebakjes: border-top-left-radius, border-top-right-radius, border-bottom-right-radius en border-bottom-left-radius. Het aantal waarden dat u geeft, bepaalt op welke hoeken elke waarde van toepassing is.
| Waarden | toonbeeld | Linksboven | Rechtsboven | Rechtsonder | Linksonder |
|---|---|---|---|---|---|
| 1 | border-radius: 16px; |
16px | 16px | 16px | 16px |
| 2 | border-radius: 24px 8px; |
24px | 8px | 24px | 8px |
| 3 | border-radius: 24px 8px 0px; |
24px | 8px | 0px | 8px |
| 4 | border-radius: 20px 10px 5px 0px; |
20px | 10px | 5px | 0px |
Het patroon is dezelfde volgorde met de klok mee als gebruikt door margin en padding, beginnend vanuit de linkerbovenhoek in plaats van de bovenzijde Ontbrekende waarden worden opgevuld vanuit hun diagonale partner: met twee waarden, kopieën rechtsonder en linksonder kopieën rechtsboven Met drie, linksonder kopieën rechtsboven.
De generator keert dit proces om Je stelt elke hoek in met een eigen schuifregelaar, en hij schrijft de minste waarden die dezelfde vorm produceren:
- Alle vier de hoeken gelijk geeft één waarde.
- Linksboven gelijk aan rechtsonder en rechtsboven gelijk aan linksonder geeft twee waarden.
- Rechtsboven gelijk aan linksonder (maar de andere diagonaal verschilt) geeft drie waarden.
- Al het andere geeft er vier.
Eén gevolg verrast mensen Rond alleen de linkerbovenhoek 20px af en de output is border-radius: 20px 0px 0px;, niet de vierwaarde 20px 0px 0px 0px. Beide zijn correct; de vorm met drie waarden is korter omdat rechtsboven en linksonder beide nul zijn. Elke waarde behoudt zijn eenheid, dus een nulhoek drukt af als 0px.
Wat is het verschil tussen PX en % voor grensradius?
Een pixelradius is een absolute grootte Een percentage radius is relatief ten opzichte van het element' s grootte, en de horizontale en verticale delen worden afzonderlijk gemeten: de horizontale radius tegen de breedte, de verticale radius tegen de hoogte.
Op een vierkant zijn dat hetzelfde getal. Op een rechthoek zijn ze dat niet, en daarom 50% verandert een vierkant in een cirkel maar een rechthoek in een ellips.
Neem de generator's preview box, die 224px breed en 160px hoog is:
| waarde | Horizontale straal | Verticale straal | Shape |
|---|---|---|---|
16px |
16px | 16px | Afgeronde rechthoek, cirkelvormige hoeken |
50% |
112px (50% van 224) | 80px (50% van 160) | Ellipse |
25% |
56px | 40px | Afgeronde rechthoek, elliptische hoeken |
999px |
999px, geschaald naar 80px | 999px, geschaald naar 80px | Pil met ronde uiteinden |
De andere twee eenheden gedragen zich als pixels zodra ze zijn opgelost. em is relatief aan het element' zijn eigen lettergrootte en rem naar de root lettergrootte, dus 1rem is 16px met standaard browserinstellingen Gebruik em of rem laat hoeken schalen met tekstgrootte, wat past bij knoppen en tags die groeien met hun label.
In de generator lopen schuifregelaars van 0 tot 200 voor px, 0 tot 50 voor %, en 0 tot 10 voor em en rem, in stappen van hele getallen Schakelen van de eenheid houdt de getallen en verwisselt de eenheid, dus 16px wordt 16%, geen geconverteerde waarde.
Waarom wordt een grote grensstraal niet langer ronder?
Omdat de specificatie niet toestaat dat hoekcurven elkaar overlappen Wanneer de stralen aan één kant optellen tot meer dan die kant' s lengte, de browser krimpt elke straal op het element met dezelfde factor totdat ze passen.
de regel voor hoekoverlapping werkt als volgt Voor elk van de vier zijden, deel de zijde' s lengte door de som van de twee stralen die het raken Neem de kleinste van die verhoudingen, noem het f. Als f kleiner is dan 1, vermenigvuldig dan elke straal met f.
Hier is de berekening voor border-radius: 999px op het voorbeeldvak van 224 bij 160:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
Elke hoek eindigt met een straal van 80px, precies de helft van de 160px hoogte, dus de korte uiteinden worden perfecte halve cirkels Hetzelfde gebeurt bij 200px, de bovenkant van de pixelschuifregelaar: f is 160 /400 = 0,4, en 200 × 0,4 is weer 80px Voorbij de helft van de kortere zijde stopt een pixelstraal met iets te veranderen.
Twee praktische resultaten volgen Een pillenknop kan elke zeer grote pixelwaarde gebruiken, en het blijft een pil op elke breedte En omdat schalen over alle vier de hoeken evenredig is, krimpt een enkele oversized hoek ook de andere Zet linksboven op 999px en laat de rest op 20px, en de 20px hoeken worden er mee verkleind.
Hoe maak je gemeenschappelijke vormen met de randstraal?
De meeste afgeronde vormen in interfaces komen uit een handvol recepten De generator heeft voorinstellingen voor de gangbare.
| Shape | CSS | vastleggen |
|---|---|---|
| Scherp | border-radius: 0px; |
De standaard voor de meeste elementen |
| Subtiel | border-radius: 6px; |
Ingangen, kleine knoppen |
| Card | border-radius: 12px; |
Panelen en kaarten |
| Afgerond | border-radius: 16px; |
De generator's startwaarde |
| Pill | border-radius: 999px; |
Werkt op elke breedte via overlapschaling |
| Circle | border-radius: 50%; |
Heeft gelijke breedte en hoogte nodig |
| Leaf | border-radius: 0px 24px; |
Twee tegenover elkaar liggende hoeken afgerond |
| Blob | border-radius: 60% 40%; |
Organische vorm uit ongelijke percentages |
| Spraakbel | border-radius: 16px 16px 16px 0px; |
Eén scherpe hoek bij de luidspreker |
| Tab | border-radius: 8px 8px 0px 0px; |
Afgeronde bovenkant, platte onderkant |
Circle. Set 50% op een element met gelijke breedte en hoogte Voor avatars, toevoegen aspect-ratio: 1 en object-fit: cover op de afbeelding rekt een niet-vierkante foto dus niet uit tot een ellips.
Pill. Gebruik een grote pixelwaarde in plaats van 50%. Op een brede knop, 50% produceert een ellips met puntig uitziende uiteinden, omdat de horizontale straal de helft van de breedte bedraagt. 999px wordt in plaats daarvan geschaald tot de helft van de hoogte, waardoor ronde uiteinden ontstaan.
Blob. De voorinstelling 60% 40% stelt linksboven en rechtsonder in op 60% en de andere twee op 40% Op het voorbeeldvak zijn de horizontale stralen langs de bovenrand 134,4px en 89,6px, wat opgeteld precies 224px is, zodat er geen schaling optreedt en de twee curven elkaar ontmoeten zonder rechte rand ertussen Voorinstellingen kunnen voorbij het schuifbereik gaan: Blob gebruikt 60%, Pill gebruikt 999px en de uitvoer behoudt die waarden totdat u een schuifregelaar verplaatst.
Spraakbel en tabblad. Geen van beide vormen heeft een bijpassend diagonaalpaar, dus beide hebben alle vier de waarden nodig Stel de hoeken afzonderlijk in de generator in en het bevestigt dat er geen kortere vorm bestaat.
Wat is de schuine streep syntaxis in grens-radius?
Een schuine streep scheidt horizontale stralen van verticale stralen, zodat elke hoek een niet-cirkelvormige ellips kan zijn met afmetingen die u rechtstreeks kiest.
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
De waarden aan elke kant van de schuine streep volgen dezelfde één-op-vier regels als de normale steno De Toolz-generator schrijft geen schuine streepsyntaxis: hij stelt één straal per hoek in, die cirkels, pillen, kaarten en klodders omvat Voor eivormen en aangepaste lensvormen begint u bij de generator' s-uitvoer en voegt u het schuine gedeelte met de hand toe.
Waarom zijn mijn afgeronde hoeken niet zichtbaar?
Wanneer border-radius lijkt niets te doen, de oorzaak is er bijna altijd één van.
| Symptoom | Oorzaak | Fix |
|---|---|---|
| Afbeelding of kind steekt uit de hoeken | Kinderen worden niet standaard geknipt | Add overflow: hidden naar de afgeronde ouder, of ook rond het kind |
| Helemaal geen zichtbare verandering | Element heeft geen achtergrond, rand of schaduw | Geef het een achtergrondkleur of rand zodat de vorm zichtbaar is |
| Tafelhoeken blijven vierkant | border-collapse: collapse op tafel |
goed doen border-collapse: separate van border-spacing: 0, of rond een wikkel |
| Cirkel lijkt op een ovaal | Breedte en hoogte verschillen | Stel gelijke afmetingen in of aspect-ratio: 1 |
| Pil heeft puntige uiteinden | Gebruik 50% op een breed element |
Gebruik een grote px-waarde zoals 999px |
| Straal stopt met toenemen | Overlapschaling | Verwacht; straal wordt afgedekt op de helft van de kortere zijde |
| Binnenste element hoeken zien er dikker uit | Binnenstraal is gelijk aan buitenstraal binnen opvulling | Stel de binnenradius in op de buitenradius minus de vulling |
De laatste is subtiel Een kaartje met border-radius: 16px en padding: 8px met daarin een afbeelding met dezelfde straal van 16px ziet er ongelijk uit, omdat de binnenste kromme strakker moet zijn De binnenste straal die volgt op de buitenste kromme is 16 min 8, dus 8px.
Hoe combineert grensstraal met schaduwen en hellingen?
Afgeronde hoeken worden zelden alleen verzonden Een kaart heeft meestal een schaduw en vaak een gradiëntachtergrond, en beide volgen automatisch de afgeronde vorm.
box-shadow traceert de afgeronde randdoos, dus een zachte schaduw onder een 12px kaart heeft 12px afgeronde hoeken zonder extra werk De box shadow generator geeft een voorbeeld van schaduwen op een afgerond element, en de box shadow guide verklaart de offset, vervaging en spread waarden erachter.
Achtergronden, inclusief gradiënten, worden ook in de ronde vorm geknipt. Om de vulling te ontwerpen, gebruikt u de CSS-gradiëntgenerator; de CSS-gradiëntgids loopt door de syntaxis Als de hoekgrootte moet schalen met de viewport in plaats van vast te blijven, wordt de CSS klem generator bouwt een clamp() waarde die je als radius kunt gebruiken, bijvoorbeeld een kaart die 8px is op telefoons en 20px op brede schermen.
Met behulp van de generator, stap voor stap
- Kies een voorinstelling zoals Kaart, Pil, Cirkel of Blob, of begin vanaf de standaardhoeken van 16px.
- Corners aanpassen. De hoekschakelaar gaat standaard naar Onafhankelijk, waarbij elke schuifregelaar alleen zijn eigen hoek verplaatst Schakel deze naar Gekoppeld om ze alle vier samen te verplaatsen.
- Kies een eenheid: px, %, em of rem.
- Controleer het voorbeeld. Het verloopvak wordt bijgewerkt terwijl u sleept, inclusief overlapschaling op grote waarden.
- Kopieer de CSS. De knop CSS kopiëren kopieert het volledige
border-radius:verklaring in de kortste vorm.
Alles draait client-side: de preview en code worden gegenereerd door JavaScript in uw browser, er wordt niets geüpload en de pagina blijft offline werken zodra deze is geladen. Wanneer u er klaar voor bent, open de grensstraalgenerator, stel uw hoeken in en plak de declaratie rechtstreeks in uw stylesheet.
