Очень простое настраиваемое закругление краёв любых картинок через css
Для начала посмотрите ДЕМО
Установка:
После /head на нужных страницах вставляйте:
Code
<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"
Code
<img src="Ссылка на картинку" width="100" height="100" class="normal-img" />
Ссылка на источник материала.
