Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Zaokrąglanie narożników - zapis zbiorczy

Email Drukuj PDF

border-radius

Dostępne wartości:

wartość liczbowa | procent | inherit

Wartość domyślna:

0

Przykład:

div { border-radius: 5px 10px;}

Dziedziczenie:

Nie

Obsługa:

Chrome

Za pomocą stylu border-radius możemy opisać w zbiorczy sposób zaokrąglenie wszystkich narożników bez rozróżnienia na strony. Przykładowy styl może mieć postać:

DIV

{

width:200px;

height:200px;

background-color:#C0FFC0;

border-radius: 100px 100px;

border:solid 3px red;

}

Wartości określające profil łuku podane w taki sposób jak na przykładzie powodują, że wszystkie narożniki będą identyczne. Przykład działania powyższego stylu widać poniżej. Przykład poprawnie zadziała w przeglądarce Chrome, a użytkownicy Internet Explorera, Safari, Opery i Mozilli Firefox muszą zadowolić się rysunkiem 15.27.

<<przykład>>

<div class="przyklad">

<div style="width:200px;height:200px;background-color:#C0FFC0;border-radius: 100px 100px;border:solid 3px red;">&nbsp;</div>

</div>

<</przykład>>

Rysunek 15.27. Przykład zbiorczej deklaracji odpowiedzialnej za zaokrąglenie narożników

Stosując zbiorczy zapis właściwości obramowania, możemy również zróżnicować zaokrąglenie poszczególnych narożników. Bezpośrednio po dwukropku podajemy cztery wartości, które odpowiadają kolejno lewemu górnemu, prawemu górnemu, lewemu dolnemu i prawemu dolnemu narożnikowi. Odpowiedni zapis w arkuszu stylów może mieć postać:

DIV

{

background-color:#C0FFC0;

border:solid 3px red;

width:12em;

height:5em;

border-radius:1em 4em 1em 4em;

}

 

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

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15464192