CSS3 Границы

С помощью CSS3 можно создавать скруглённые границы, добавлять тени блоков и использовать изображения в качестве границ без использования дизайнерских программ, таких как Photoshop.

В этой главе вы узнаете о следующих свойствах границ:

border-radius
box-shadow
border-image

CSS3 Скругленные углы

Добавление закруглённых углов было сложной задачей в CSS2. Нам приходилось использовать разные изображения для каждого угла.

В CSS3 легко создавать закруглённые углы.

В CSS3 свойство border-radius используется для создания закруглённых углов:

Это закруглённая граница!

Пример

Добавьте элементы со скруглёнными углами в div:

div
{
border:2px solid;
border-radius:25px;
}

Попробуйте сами »

Тень блока в CSS3

Свойство box-shadow в CSS3 используется для добавления теней:

Пример

Добавьте свойство box-shadow к div

div
{
box-shadow: 10px 10px 5px #888888;
}

Попробуйте сами »

Изображения границ CSS3

С помощью свойства border-image в CSS3 можно использовать изображение для создания границы:

Свойство border-image позволяет указать изображение в качестве границы! Исходное изображение, использованное для создания вышеуказанной границы:

Создайте границу в div с помощью изображения:

Пример

Создайте границу в div с помощью изображения

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 и более старые версии */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

Попробуйте сами »

Новые свойства границ

Свойство	Описание	CSS
border-image	Установите сокращённое свойство для всех изображений границ.	3
border-radius	Сокращённое свойство для задания всех четырёх свойств border-*-radius	3
box-shadow	Прикрепляет к блоку одну или несколько теней.	3

Другие расширения