Авто-закругление углов у картинок через css
Очень простое настраиваемое закругление краёв любых картинок через css
Инструкция:
1) После </head> на нужных страницах вставляйте:
Код:
.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":
Код: