Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - obramowania

CSS3 - border-radius

Email Drukuj PDF

Tematy: border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius | border-radius | box-shadow | border-image-source | border-image-width | border-image-outset | border-image-repeat | border-image-slice | border-image | box-decoration-break

Dane w pigułce
Zastosowanie Zaokrągla narożniki pojemnika
Dziedziczenie nie
Wartości długość w px, pt, em lub procent
Wartość domyślna 0
Przykład border-radius: 10px
Składnia JavaScript object.style.borderRadius="10px"

Aby zdefiniować zaokrąglenie, należy wpisać w definicji stylu border-radius : wartość

Aby definicja była odczytywana przez Firefoksa 3.x, należy dodać także definicję z prefiksem -moz-, czyli -moz-border-radius : wartość. Firefox 4 nie wymaga prefiksu.

Informacje o zaokrąglaniu poszczególnych narożników zawarte są na stronach border-top-left-radius, border-top-right-radius, border-bottom-left-radius i border-bottom-right-radius. Tutaj przedstawimy techniki związane ze zbiorczym definiowaniem zaokrągleń.

Styl border-radius definiuje wszystkie narożniki jednocześnie. Kod o postaci:

div {width=200px; heigth: 100px; background-color: khaki; border-radius: 10px;}

tworzy jednakowe zaokrąglenie dla wszystkich narożników,

 

Możemy zdefiniować poszczególne narożniki z osobna, podając cztery kolejne wartości (lewy-górny, prawy-górny, prawy-dolny, lewy-dolny), np.

div {width=200px; heigth: 100px; background-color: khaki; border-radius: 10px 20px 30px 40px;}
 

Możemy podać dwie kolejne wartości, które definiują odpowiednio lewy-górny i prawy-dolny oraz prawy-górny i lewy-dolny narożnik, np.

div {width=200px; heigth: 100px; background-color: khaki; border-radius: 30px 60px;}
 

Powyższe wartości definiują poszczególne narożniki jako pojedyncze liczby. Użycie pary wartości rozdzielonych ukośnikiem pozwala zróżnicować zaokrąglenia, modyfikując stopień zaokrąglenia z jednej i drugiej strony danego narożnika. W poniższym przykładzie wszystkie narożniki są definiowane tą samą parą 40/20.

div {width=200px; heigth: 100px; background-color: khaki; border-radius: 40px / 20px;}
 

Wartości mogą stanowić 50% boku pojemnika, co przy równych bokach tworzy okrąg:

 

Ze względu na interpretację w Operze i Firefoksie powinniśmy jednak podać nie 50%, lecz dopasowaną wartość w pikselach, np. 100px; dla pojemnika o wymiarach 200x200.

Jeśli pojemnik jest prostokątem o nierównych parach boków, użycie 50% boku pojemnika tworzy elipsę:

 

Ze względu na interpretację w Operze i Firefoksie powinniśmy jednak podać nie 50%, lecz dopasowaną parę wartości w pikselach, np. 100px / 50px; dla pojemnika o wymiarach 200x100.


Interpretacja: Internet Explorer 9, Firefox, Opera, Chrome.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V