Możesz nadać dowolnemu elementowi „zaokrąglone rogi”, stosując border-radiusprzez CSS. Zauważysz tylko wtedy, gdy w grę wchodzi zmiana koloru. Na przykład, jeśli element ma kolor tła lub obramowanie inne niż element, na którym się skończył. Proste przykłady:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )To już naprawdę nie jest już konieczne, ale aby uzyskać absolutnie najlepszą możliwą obsługę przeglądarki, możesz poprzedzić -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; )Zwróć uwagę na kolejność tych właściwości: przedrostki dostawców są wymienione jako pierwsze, a wersja „spec” bez prefiksu jest wymieniona jako ostatnia. To jest właściwy sposób, aby to zrobić. Promień krawędzi jest szczególnie dobrym przykładem tego, dlaczego robimy to w ten sposób. W nieco bardziej skomplikowanej wersji użycia border-radius(gdzie podaje się dwie wartości zamiast jednej) starszy -webkit-prefiks dostawcy zrobiłby coś zupełnie innego niż wersja „spec”. Więc jeśli ślepo skopiujemy / wkleimy te same wartości do wszystkich trzech właściwości, możemy zobaczyć różne wyniki w różnych przeglądarkach. Dowiedz się więcej o tym scenariuszu. Aby uzyskać jak największą spójność w długim okresie, najlepiej jest umieścić wersję „specyfikacji” jako ostatnią.
W dzisiejszych czasach całkiem realistyczne jest usuwanie prefiksów i używanie po prostu border-radius, jak omówiono tutaj.
Jeśli element ma tło obrazu, zostanie naturalnie obcięty w zaokrąglonym rogu:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )Czasami można zobaczyć background-color„wyciek” poza granicą, jeśli border-radiusjest obecny. (widzieć). Aby temu zapobiec, użyj klipu w tle:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )Przy tylko jednej wartości border-radiusbędzie to samo we wszystkich czterech rogach elementu. Ale nie musi tak być. Jeśli chcesz, możesz określić każdy róg osobno:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )Możesz również określić dwie lub trzy wartości. MDN dobrze to wyjaśnia:
Jeśli ustawiono jedną wartość, ten promień dotyczy wszystkich 4 narożników .
Jeśli ustawiono dwie wartości, pierwsza dotyczy top-lefti bottom-rightnarożnika, a druga dotyczy narożnika top-righti bottom-left.
Cztery wartości odnoszą się do top-left, top-right, bottom-right, bottom-leftrogu w tej kolejności.
Trzy wartości: druga wartość dotyczy top-righti również bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )Możesz również określić promienie, przez które narożnik jest zaokrąglany. Innymi słowy, zaokrąglenie nie musi być idealnie okrągłe, może być eliptyczne. Odbywa się to za pomocą ukośnika („/”) między dwiema wartościami.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Uwaga: Firefox obsługiwał obramowanie eliptyczne tylko w przeglądarkach WebKit 3.5+ i starszych (np. Safari 4) nieprawidłowo traktuje „40px 10px” jako to samo, co „40px / 10px”.
Możesz określić wartość border-radiusw procentach. Jest to szczególnie przydatne, gdy chcesz utworzyć kształt koła lub elipsy, ale można go użyć w dowolnym momencie, gdy chcesz, aby promień granicy był bezpośrednio skorelowany z szerokością elementów.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Uwaga: w Safari wartości procentowe border-radius są obsługiwane tylko w wersji 5.1+. W przeglądarce Opera obsługiwana tylko w wersji 11.5+.
Oto poszczególne usługi z prefiksami dostawców:
.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; )Uwaga: każda z tych wartości może mieć również wartość oddzieloną spacjami, np. „5px 10px”, która zachowuje się jak wartość oddzielona ukośnikiem w skrócie (promień poziomy (spacja) promień pionowy).
Zasoby
- Szybkie narzędzie do generowania kodu promienia obramowania
- Dokumenty Mozilli
- W poszukiwaniu idealnego promienia
- Czy musimy już poprzedzać border-radius?
Oto mała rzecz do zabawy z różnymi właściwościami i wartościami:
Zobacz Pen All the border-radius ”autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 4 * | 3 * | 9 | 12 | 3,1 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 * | 3,2 * |