WEB-нотатки - записник он-лайн

border-radius - дуже зручна властивість у CSS3.
Наприклад (з хаками для браузерів):
Code
.mycontent {
border:1px solid #000000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
}

Тепер для прикладу задамо декілька варіантів оформлення блоків. Спочатку коди, а потім демо.

Всі вугли заокруглено:

Code
border:1px solid #999999;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;

Верхній лівий і нижній правий:

Code
border:1px solid #999999;
border-radius:15px 0 15px 0;
-moz-border-radius:15px 0 15px 0;
-webkit-border-radius:15px 0 15px 0;
-khtml-border-radius:15px 0 15px 0;

Зверху ліворуч і праворуч:

Code
border:1px solid #999999;
border-radius:20px 20px 0 0;
-moz-border-radius:20px 20px 0 0;
-webkit-border-radius:20px 20px 0 0;
-khtml-border-radius:20px 20px 0 0;

Верхній лівий:

Code
border:1px solid #999999;
border-radius:25px 0 0 0;
-moz-border-radius:25px 0 0 0;
-webkit-border-radius:25px 0 0 0;
-khtml-border-radius:25px 0 0 0;

А тепер, як все виглядатиме: ДЕМО

Категорія: CSS3 · Додав: mr_smith (07.06.2010)
Переглядів: 702 · Рейтинг: 5.0/1
Всього коментарів: 0
Додавати коментарі можуть лише зареєстровані користувачі.
[ Реєстрація | Вхід ]
Головна
Реєстрація
Вхід

Пошук

Категорії

HTML
PHP
JavaScript
CSS
HTML5
CSS3
jQuery
uCoz
 
© pya.at.ua 2009 - 2025
Хостинг від uCoz