Я почав розповідати про секрети CSS3 у попередній статті, тепер настав час продовжити.
Сьогодні ми будемо робити кути округлими! І ніякого використання картинок для цього, як було колись. Для цього нам потрібно лише скористатися border-radius’ом. Читачі, які читають цю статтю з Internet Explorer нічого не побачать, оскільки він не підтримує цю технологію. Тому змініть ваш браузер на останні Opera (підтримує версія 10.53 і вище), Mozilla Firefox, Safari чи Chrome.
CSS3 – округлі кути для всіх чотирьох кутів (вибачте за тавтологію)
[css]#my_CSS3_id {
border: 5px solid #c4c8cc;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}[/css]
border: 5px solid #c4c8cc;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}[/css]
CSS3 – округлі кути для деяких кутів
[css]#my_CSS3_id {
border-top-left-radius:15px;
border-top-right-radius:0px;
border-bottom-right-radius:15px;
border-bottom-left-radius:0px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:15px;
}[/css]
border-top-left-radius:15px;
border-top-right-radius:0px;
border-bottom-right-radius:15px;
border-bottom-left-radius:0px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:15px;
}[/css]
Те ж саме можна робити з картинками, достатньо лише вставити її в ці теґи.
Далі буде: CSS3: Border Color
© Не Кіт
коментарі 2
-webkit-border-radius вже не потрібний, бо всі броузери на webkit\’овому движку вже розуміють правило border-radius
думаю, слід врахувати, що не всі оновлюють вчасно браузери, тому щоб у їхніх старіших версіях відображались всі ефекти, варто прописати -webkit-. це не складно, але корисно.