Raja-säde - CSS-temppuja | CSS-almanakka 2025

Voit antaa mille tahansa elementille pyöristetyt kulmat soveltamalla border-radiusläpimenevää CSS: ää. Huomaat vain, jos väriä on muutettu. Esimerkiksi, jos elementillä on taustaväri tai reunus, joka on erilainen kuin sen elementti, jonka se on ohi. Yksinkertaisia esimerkkejä:

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

Se ei todellakaan ole enää välttämätöntä, mutta ehdottomasti parhaan mahdollisen selaintuen saamiseksi voit lisätä etuliitteen -webkit-ja -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; )

Huomaa näiden ominaisuuksien järjestys: toimittajan etuliitteet luetellaan ensin ja ei-etuliitetty ”spec” -versio luetellaan viimeisenä. Tämä on oikea tapa tehdä se. Rajasäde on erityisen hyvä esimerkki siitä, miksi teemme sen näin. Hieman monimutkaisemmassa versiossa border-radius(jossa välität kaksi arvoa yhden sijasta) vanhempi -webkit-toimittajan etuliite tekisi jotain täysin erilaista kuin ”spec” -versio. Joten jos kopioimme / liitämme sokeasti samat arvot kaikkiin kolmeen ominaisuuteen, voimme nähdä erilaiset tulokset selainten kautta. Lisätietoja tästä tilanteesta. Pitkän aikavälin johdonmukaisuuden vuoksi on parasta luetella ”spec” -versio viimeisenä.

Nykyään on melko realistista pudottaa etuliitteitä ja käyttää vain reunasädettä, kuten täällä keskustellaan.

Jos elementillä on kuvan tausta, se leikataan pyöristetyssä kulmassa luonnollisesti:

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

Joskus voit nähdä background-color”vuotamisen” rajan ulkopuolella, kun sitä border-radiuson läsnä. (katso). Voit estää tämän käyttämällä taustaleikettä:

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

Vain yhdellä arvolla, border-radiussama sama elementin kaikissa neljässä kulmassa. Mutta sen ei tarvitse olla asia. Voit määrittää kukin kulma erikseen, jos haluat:

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

Voit myös määrittää kaksi tai kolme arvoa. MDN selittää sen hyvin:

Jos yksi arvo on asetettu, tämä säde koskee kaikkia 4 kulmaa .
Jos kaksi arvoa on asetettu, ensimmäinen koskee top-leftja bottom-rightkulmaa, toinen koskee top-rightja bottom-leftkulmaa.
Neljä arvoja sovelletaan top-left, top-right, bottom-right, bottom-leftnurkka tässä järjestyksessä.
Kolme arvoa: Toinen arvo koskee top-rightja myös bottom-left.

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

Voit myös määrittää säteet, joilla kulma on pyöristetty. Toisin sanoen pyöristyksen ei tarvitse olla täysin pyöreä, se voi olla elliptinen. Tämä tehdään käyttämällä vinoviivaa (“/”) kahden arvon välillä.

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

Huomaa: Firefox tukee elliptisiä reunoja vain 3.5+ tai vanhemmissa WebKit-selaimissa (esim. Safari 4) käsittelee ”40px 10px” väärin kuin ”40px / 10px”.

Voit määrittää arvon border-radiusprosentteina. Tämä on erityisen hyödyllistä, kun haluat luoda ympyrän tai elipsin muodon, mutta sitä voidaan käyttää milloin tahansa, kun haluat, että reunan säde korreloi suoraan elementtien leveyden kanssa.

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

Huomaa: Safarissa reunasäteen prosentuaaliset arvot tuetaan vain versiossa 5.1+. Operassa, tuettu vain versiossa 11.5+.

Tässä on kukin omaisuus, toimittajan etuliitteillä:

.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; )

Huomaa: Jokaisella näistä arvoista voi olla myös välilyönnillä erotettu arvo, kuten "5px 10px", joka käyttäytyy kuin kauttaviivalla erotettu arvo lyhenteessä (vaakasäde (tila) pystysäde).

Resurssit

Nopea työkalu raja-sädekoodin luomiseen
Mozilla Docs
Täydellisen säteen etsiminen
Täytyykö meidän enää etuliittää raja-säde?

Tässä on pieni asia, jota voi pelata eri ominaisuuksilla ja arvoilla:

Katso Kynä kaikki raja-säde ', kirjoittanut Chris Coyier (@chriscoyier) CodePenistä.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.