Урок №2 Рамки в CSS3 - 20 October 2014

Home » » Урок №2 Рамки в CSS3

6:57 PM

Урок №2 Рамки в CSS3

Рамки в CSS3

Чрез CSS3, можете да създавате кръгли рамки, да добавяте сянка на кутиите, и да използвате изображение като рамка - без дори да ви се налага да ползвате програми като Photoshop.

В този урок ще разгледаме следните свойства на рамките в CSS3

border-radius
box-shadow
border-image

Browser Support

Цифрите в таблицата определят най-ниската версия на браузъра която напълно поддържа това CSS3 свойство.

Числата след които има -webkit-, -moz-, или -o- определят първата версия която е работа с префикс.

Свойство
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5
box-shadow	9.0	10.0 4.0 -webkit-	4.0 3.5 -moz-	5.1 3.1 -webkit-	10.5
border-image	11.0	16.0 4.0 -webkit-	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

Свойството border-radius в CSS3 - Заоблени ъгли (Rounded Corners)

Добавянето на заоблени ъгли в CSS2 беше доста трудно. Трябваше да използваме различни изображения за всеки ъгъл.

В CSS3, създаването на рамка със заоблени ъгли е повече от лесно.

В CSS3, свойството border-radius се използва за създаване на заоблени ъгли като тези :

Тази рамка е с заоблени ъгли

Пример

Добавяне на рамка със заоблени ъгли (rounded corners) към div елемент:

div {

    border: 2px solid;

    border-radius: 25px;

}

CSS3 Свойството box-shadow

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

Пример

Добавяне на box-shadow към div елемент:

div {

    box-shadow: 10px 10px 5px #888888;

}

CSS3 Свойството border-image

В CSS3 свойството border-image се използва за да създадете рамка използвайки изображение като тази :

Свойството border-image ви позволява да задавате изображение като рамка.

Изображението използвано за създаването на горната рамка е това:

Пример

Използване на изображение за създаване на рамка около div елемент:

div {

    -webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */

    -o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */

    border-image: url(border.png) 30 30 round;

}

Свойства на рамките в CSS3

Свойство	Описание	CSS
border-image	Шорткод за задаване на всички свойства на border-image-*	3
border-radius	Шорткод за задаване на всичките четири свойства на border-*-radius	3
box-shadow	Прилага една или повече сенки (drop-shadow) върху кутията.	3

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :

Всички коментари: 0