Как сделать круглое изображение через свойство CSS3

28 мая 2013  6430  CSS, онлайн-инструменты

 

Cвойство CSS3 border-radius, значением которого выступает радиус закругления, позволяет из квадратного изображения получить круглое. В качестве значения свойства следует задать половину ширины рисунка или указать заведомо большое число параметра радиуса, превышающее размеры изображения.

Исходное изображение, 200×200

<img src="/images/5/gfdgfd.jpg" alt="" />

 

Круглое изображение без оформления

<img src="/images/5/gfdgfd.jpg" class="circle" alt="" />

 

 

.circle{
  -webkit-border-radius: 100px; /* Для Safari и Chrome */
  -moz-border-radius: 100px; /* Для Firefox */
  border-radius: 100px; /* Параметры закругления */
  behavior: url(/files/PIE.htc); /* Таблетка для IE */
}

 

Круглое изображение с оформлением (тень, обрамление шириной 2 пикселя)

<img src="/images/5/gfdgfd.jpg" class="circle_img" />

 

 

.circle_img{
  -webkit-border-radius: 50em;
  -moz-border-radius: 50em;
  border-radius: 50em;
  border: 2px solid #EAEAEA;
  -moz-box-shadow: 0 3px 2px rgba(0,0,0,0.3); /* Для Firefox */
  -webkit-box-shadow: 0 3px 2px rgba(0,0,0,0.3); /* Для Safari и Chrome */
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); /* Параметры тени */
  behavior: url(/files/PIE.htc); /* Таблетка для IE */
}

«Таблетки» для IE:

Загрузите любой из файлов на сайт и укажите путь к нему в CSS, например:

behavior: url(/files/PIE.htc); /* Таблетка для IE */

Кстати...

Если использование свойств CSS3 не подходит по каким-то причинам — изображение можно сделать круглым в редакторе.

Нет Photoshop? Используйте онлайн-инструмент AnyMaking, который превратит ваше квадратное изображение в круглое. Загружайте изображение (Upload), устанавливайте максимальное значение радиуса (corner radius) и загружайте (Save) готовое круглое фото.

 

Комментарии для сайта Cackle
наверх