Воскресенье, 05.05.2024, 11:26
Главная | Вход | RSS
Меню сайта
Категории раздела
JQuery плагины [59]
JQuery уроки [69]
PHP полезное [24]
PHP уроки [21]
Css [26]
JS [3]
SQL [9]
Css 3 [17]
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » Статьи » Css 3
Границы CSS3

Границы CSS3

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

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

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


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
div
{
 border:2px solid #a1a1a1;
 padding:10px 40px; 
 background:#dddddd;
 width:300px;
  border-radius:25px;
 -moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>

<div>Свойство border-radius позволяет добавлять закругленные углы к элементам.</div>

</body>
</html>

Тень коробки CSS3

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

Граница картинка CSS3

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

Примечание: Internet Explorer не поддерживает свойство border-image.

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







Категория: Css 3 | Добавил: ChronoW (09.07.2013)
Просмотров: 927 | Теги: box-shadow, Границы CSS3, ксс3, CSS3, border-radius | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: