Határsugár - CSS-trükkök | CSS Almanach 2025

Bármelyik elemnek „lekerekített sarkokat” adhat, ha egy border-radiusCSS-t alkalmaz. Csak akkor veszi észre, ha színváltozásról van szó. Például, ha az elem háttérszíne vagy szegélye eltér attól, amelyen túl van. Egyszerű példák:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Ez már tényleg nem szükséges, de a lehető legjobb böngésző-támogatás érdekében előtaggal -webkit-és -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Vegye figyelembe ezeknek a tulajdonságoknak a sorrendjét: a szállító előtagjai szerepelnek elsőként, a nem előtagú „spec” verzió pedig utoljára. Ez a helyes módszer erre. A határsugár különösen jó példa arra, hogy miért csináljuk így. A használat kissé bonyolultabb verziójában border-radius(ahol két értéket ad át egy helyett) a régebbi -webkit-gyártói előtag egészen mást tenne, mint a „spec” verzió. Tehát, ha ugyanazokat az értékeket vakon bemásoljuk / beillesztjük mindhárom tulajdonságba, akkor különböző eredményeket láthatunk böngészőkön keresztül. További információ erről a forgatókönyvről. A hosszú távú konzisztencia érdekében a legjobb, ha a „spec” verziót utoljára soroljuk fel.

Manapság elég reális elhagyni az előtagokat, és csak a határsugarat használni, amint itt tárgyaltuk.

Ha az elem képhátterű, akkor a lekerekített sarokban természetesen levágják:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Néha background-color„szivárgást” láthat a határon kívül, amikor border-radiusjelen van. (lát). Ennek megakadályozásához háttérklipet használ:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

Csak egy értékkel, border-radiusugyanaz lesz az elem mind a négy sarkában. De ennek nem kell így lennie. Minden sarkot külön megadhat, ha kívánja:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Két vagy három értéket is megadhat. Az MDN jól megmagyarázza:

Ha egy értéket állít be, akkor ez a sugár mind a 4 sarokra érvényes .
Ha két érték van megadva, az első érvényes top-leftés bottom-rightsarok, a második érvényes top-rightés bottom-leftsarok.
Négy értékek az top-left, top-right, bottom-right, bottom-leftsarok ebben a sorrendben.
Három érték: A második érték vonatkozik rá top-rightis bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Megadhatja azokat a sugarakat is, amelyekkel a sarok kerekítve van. Más szavakkal, a kerekítésnek nem kell tökéletesen körkörösnek lennie, ellipszis lehet. Ez két érték közötti perjel („/”) használatával történik.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Megjegyzés: A Firefox csak ellipszis szegélyeket támogatott a 3.5+ vagy régebbi WebKit böngészőkben (pl. Safari 4), a „40px 10px” tévesen kezeli a „40px / 10px” kifejezéssel.

Megadhatja border-radiusszázalékos értéket . Ez különösen akkor hasznos, ha kör- vagy ellipsz alakzatot akar létrehozni, de bármikor használható, ha azt szeretné, hogy a szegély sugara közvetlenül korreláljon az elemek szélességével.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Megjegyzés: A Safari-ban a határsugár százalékos értékei csak az 5.1 vagy újabb verziókban támogatottak. Operában, csak 11.5-es vagy újabb verzióban támogatott.

Itt található az egyes tulajdonságok, szállító előtagokkal:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Megjegyzés: Ezen értékek mindegyikének lehet szóközzel elválasztott értéke is, például az „5px 10px”, amely rövidítéssel (vízszintes sugár (tér) függőleges sugár) perjellel elválasztott értékként viselkedik.

Erőforrások

Gyors eszköz a határsugár kód előállításához
Mozilla Docs
A tökéletes sugár keresésére
Szükség van-e már a határ-sugár előtagozására?

Íme egy apróság a különböző tulajdonságokkal és értékekkel:

Chris Coyier (@chriscoyier) a Pen All the border-radius 'című cikket látja a CodePen oldalon.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.