| Главная » Файлы » Прочие скрипты » CSS |
Закругление углов у картинок через css
| 23.06.14, 11:38:08 | |
 Очень простое настраиваемое закругление краёв любых картинок через css Для начала посмотрите ДЕМО Установка: После /head на нужных страницах вставляйте: Код <style type="text/css"> .normal-img { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .4); box-shadow: 0 1px 5px rgba(0, 0, 0, .4); } </style> Немного разберём настройки: -webkit-border-radius: 15px; - Степень закругления углов для Вебкит браузеров -moz-border-radius: 15px; - Степень закругления углов для браузеров на движке Mozilla border-radius: 15px; - Степень закругления углов для всех остальных браузеров -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4); - Параметры настройки тени вокруг картинки для Вебкит браузеров -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .4); - Параметры настройки тени вокруг картинки для браузеров на движке Mozilla box-shadow: 0 1px 5px rgba(0, 0, 0, .4); - Параметры настройки тени вокруг картинки для всех остальных браузеров Для того, чтобы придать картинке эффект закруглённых углов, достаточно присвоить ей класс "normal-img" Код <img src="Ссылка на картинку" width="100" height="100" class="normal-img" /> Материал подготовлен Apocalypse | |
| Просмотров: 498 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |