Главная » Файлы » Прочие скрипты » 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
Категория: CSS | Добавил: Apocalypse | Теги: CSS, углов, картинок, Через, Закругление
Просмотров: 455 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: