|
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;"> </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;
}
