Zaokrąglanie narożników - zapis zbiorczy

piątek, 12 marzec 2010 09:51 Administrator
Drukuj

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;

}