Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

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 используется для создания закругленных углов:

Этот блок имеет закругленные углы!

Opera Safari Chrome Firefox Internet Explorer

Пример

Добавление закругленных углов к элементу div:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 и более ранние версии */
}

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


CSS3 Тень Контейнера

В CSS3, свойство box-shadow используется для добавления тени к контейнерам:


Opera Safari Chrome Firefox Internet Explorer

Пример

Добавление тени контейнера к элементу div:

div
{
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */
}

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


CSS3 Граница-Изображение

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

Свойство border-image позволяет вам указать границу-изображение!

Оригинальное изображение, используемое для создания границы ваше:

Граница

Opera Safari Chrome Firefox Internet Explorer

Пример

Использование изображения для создания границы вокруг элемента div:

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari и Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

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


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

Свойство Описание CSS
border-image Стенографическое свойство для установки всех свойств группы border-image-* 3
border-radius Стенографическое свойство для установки всех четырех свойств border-*-radius 3
box-shadow Присоединяет один или более эффектов отбрасывания тени к контейнеру 3






« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru