HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Сглаженное скругление углов у картинки с помощью css

Ранее была статья о скруглении углов у блоков, а что вот делать, если надо скруглить углы у самой картинки, т.е. у картинки вставленной через тег img?

Идея метода такова. Пусть нам надо скруглить углы у картинок на синем фоне:

скругление углов у картинки с помощью css

Для этого приготовим 4 картинки — 4 угла, которые выделил красным. Уголки надо вырезать с полупрозрачными пикселами, чтобы скругление углов у картинки было сглаженным, а не квадратным. Теперь, когда 4 уголка готовы, их надо спозиционировать по своим местам над картинкой. Вот, например, такой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Сглаживание углов у картинок с помощью css</title>
<style type="text/css">
body {
	background:#00a8ff;
	padding:50px;
}
.corners {
	float:left; /* также если мы знаем размеры, можно просто задать ширину и высоту */
	position:relative;/* чтобы внутри абсолютноспозиционированные элементы позиционировались относительно этого блока */
	z-index:1; /* на всякий случай, во избежание перекрытия масок, модальных окон и т.п. */
}
.corners img {
	float:left; /* чтобы в ие6 пропал трехпиксельный отступ у картинки */
}
.corners .c1 {
	width:44px;/* размеры нашего уголка */
	height:44px;
	position:absolute; /* соответствующее позиционирование */
	z-index:1;
	left:0;
	top:0;
	background:url(c1.png);
	_background:none; /* призываем ие6 показывать полупрозрачный пнг */
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='c1.png', sizingMethod='scale');
}
.corners .c2 {
	width:44px;
	height:44px;
	position:absolute;
	z-index:1;
	right:0;
	top:0;
	background:url(c2.png);
	_background:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='c2.png', sizingMethod='scale');
}
.corners .c3 {
	width:44px;
	height:44px;
	position:absolute;
	z-index:1;
	right:0;
	bottom:0;
	background:url(c3.png);
	_background:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='c3.png', sizingMethod='scale');
}
.corners .c4 {
	width:44px;
	height:44px;
	position:absolute;
	z-index:1;
	left:0;
	bottom:0;
	background:url(c4.png);
	_background:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='c4.png', sizingMethod='scale');
}
</style>
</head>
<body>
<div class="corners">
  <img src="picture.jpg" alt="Я картинка со скругленными углами" />
  <div class="c1"></div>
  <div class="c2"></div>
  <div class="c3"></div>
  <div class="c4"></div>
</div>
</body>
</html>

Скачать пример

Вот такой вот способ закругления углов у картинок с помощью css.

P.S. Немного о подводных камнях в ие6. Если размер картинки имеет нечетную ширину или высоту, в ие6 при right:0 или bottom:0 может появляться однопиксельный отступ справа и снизу соответственно. Это баг ие6. Если вам известно точные размеры будущих картинок, вы можете задавать просто координаты для углов, например left:100px; bottom:100px;. Ну а если вам нужно для любых размеров картинок, в следующих статьях читайте как убирается баг ие6 при появлении однопиксельного отступа у абсолютноспозиционированного элемента.

Метки: , , ,

Запись опубликована 21.08.2009 в 23:30 и размещена в рубрике css, html. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (5) на “Сглаженное скругление углов у картинки с помощью css”

  • Danil:
    19.11.2010 в 14:00

    Штука занимательная, но все же бесполезная, зачем так усложнять себе жизнь. ФШ мне в зубы Ж-)))

  • Аёха:
    27.01.2011 в 10:39

    Закругление углов осуществляется стандартными методами

    border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;

    http://baza-lesnik.ru/

  • Сергей:
    24.08.2011 в 02:47

    ту ласт:
    круто мужик, только это не пашет в ие7 и ие8.
    пока не сдохнет 8ие — делаем картинками.

  • Саша:
    24.11.2011 в 15:02

    Спасибо. Урок мене очень помог

  • Alex_pac:
    24.12.2011 в 12:00

    отличный метод!

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос