|
CSS3 Границы
CSS3 ГраницыС помощью CSS3, вы можете создавать закругленные границы,
добавлять тень к контейнерам и использовать изображение в качестве границы - без
применения дизайнерской программы, наподобие Photoshop.
В этом уроке вы узнаете о следующих свойствах границы:
- border-radius
- box-shadow
- border-image
Поддержка Браузерами
| Свойство |
Поддержка Браузерами |
| border-radius |
|
|
|
|
|
| box-shadow |
|
|
|
|
|
| border-image |
|
|
|
|
|
Internet Explorer 9 поддерживает некоторые из новых свойств границы.
Firefox требует приставки -moz- для border-image.
Chrome и Safari требует приставки -webkit- для border-image.
Opera требует приставки -o- для border-image.
Safari также требует приставки -webkit- для box-shadow.
Opera поддерживает новые свойства границы.
CSS3 Закругленные УглыДобавление закругленных углов в CSS2 было хитрым. Мы должны были использовать различные изображения для каждого угла.
В CSS3, создание закругленных углов является простым.
В CSS3, свойство border-radius используется для создания закругленных углов:
Этот блок имеет закругленные углы!
CSS3 Тень КонтейнераВ CSS3, свойство box-shadow используется для добавления тени к контейнерам:
CSS3 Граница-ИзображениеПосредством CSS3 свойства border-image вы можете использовать изображение для создания границы:
Свойство border-image позволяет вам указать границу-изображение!
Оригинальное изображение, используемое для создания границы ваше:
Новые Свойства Границы
| Свойство |
Описание |
CSS |
| border-image |
Стенографическое свойство для установки всех свойств группы border-image-* |
3 |
| border-radius |
Стенографическое свойство для установки всех четырех свойств border-*-radius |
3 |
| box-shadow |
Присоединяет один или более эффектов отбрасывания тени к контейнеру |
3 |
|
