Granica-radijus - CSS-trikovi

Bilo kojem elementu možete dati "zaobljene kutove" primjenom border-radiusprolaznog CSS-a. Primijetit ćete samo ako je riječ o promjeni boje. Na primjer, ako element ima boju pozadine ili obrub koji se razlikuje od elementa koji je završio. Jednostavni primjeri:

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

To stvarno više nije potrebno, ali za apsolutno najbolju moguću podršku preglednika možete dodati -webkit-i -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; )

Obratite pažnju na redoslijed tih svojstava: prefiksi dobavljača navedeni su prvi, a verzija bez specifikacije „spec“ navedena je posljednja. Ovo je ispravan način za to. Radijus granice posebno je dobar primjer zašto to činimo. U malo kompliciranijoj verziji korištenja border-radius(gdje prosljeđujete dvije vrijednosti umjesto jedne) stariji -webkit-prefiks dobavljača učinio bi nešto potpuno drugačije od verzije "spec". Dakle, ako slijepo kopiramo / zalijepimo iste vrijednosti u sva tri svojstva, mogli bismo vidjeti različite rezultate u različitim preglednicima. Saznajte više o ovom scenariju. Za dugotrajnu dosljednost, najbolje je navesti zadnju verziju "specifikacije".

U današnje vrijeme prilično je realno ispustiti prefikse i samo koristiti radijus obruba, kao što je ovdje raspravljeno.

Ako element ima pozadinu slike, prirodno će biti izrezan u zaobljeni kut:

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

Ponekad možete vidjeti background-color"curenje" izvan granice kada border-radiusje prisutno. (vidjeti). Da biste to spriječili koristite pozadinski isječak:

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

Sa samo jednom vrijednošću, border-radiusisto će biti na sva četiri ugla elementa. Ali to ne mora biti slučaj. Svaki kut možete posebno odrediti ako želite:

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

Također možete odrediti dvije ili tri vrijednosti. MDN to dobro objašnjava:

Ako je postavljena jedna vrijednost, ovaj se radijus odnosi na sva 4 ugla .
Ako su postavljene dvije vrijednosti, prva se odnosi na top-lefti bottom-rightcorner, druga se odnosi na top-righti bottom-leftcorner.
Četiri vrijednosti odnose se na top-left, top-right, bottom-right, bottom-leftkutu u tom redoslijedu.
Tri vrijednosti: Druga vrijednost odnosi se top-righti također bottom-left.

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

Također možete odrediti radijuse u kojima je zaobljen kut. Drugim riječima, zaokruživanje ne mora biti savršeno kružno, može biti i eliptično. To se radi pomoću kose crte ("/") između dvije vrijednosti.

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

Napomena: Firefox podržava eliptične obrube samo u preglednicima 3.5+ i starijim WebKit (npr. Safari 4) pogrešno tretira "40px 10px" kao i "40px / 10px".

Možete odrediti vrijednost border-radiusu postocima. To je osobito korisno kada želite stvoriti oblik kruga ili elipse, ali se može koristiti bilo kada kada želite da radijus obruba bude izravno povezan sa širinom elemenata.

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

Napomena: U Safariju postotne vrijednosti za radijus obruba podržane su samo u verziji 5.1+. U Operi, podržano samo u verziji 11.5+.

Evo svakog pojedinačnog svojstva s prefiksima dobavljača:

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

Napomena: Svaka od tih vrijednosti može imati i vrijednost odvojenu razmakom, poput "5px 10px", koja se ponaša poput vrijednosti odvojene kosim crtama u skraćenici (vodoravni radijus (razmak) vertikalni radijus).

Resursi

Brzi alat za generiranje koda radijusa obruba
Mozilla dokumenti
U potrazi za savršenim radijusom
Trebamo li više dodati prefiks border-radius?

Evo sitnice za poigravanje različitim svojstvima i vrijednostima:

Pogledajte olovku All the border-radius 'Chrisa Coyiera (@chriscoyier) na CodePenu.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.