Изображения с закругленными углами

Question

Как такие сайты, как эти , могут отображать изображения с закругленными углами?

Я проверил с помощью Firebug, что загружаемое изображение имеет острые углы, но отображаемое изображение было каким-то образом изменено.

РЕДАКТИРОВАТЬ: Я имею в виду округленные миниатюры, которые можно увидеть в разделе «Избранные статьи» на упомянутом сайте.

Answer 1

Используется наложение изображения, которое содержит изогнутые границы .

<img class="rounders2_img" width="103" height="80" alt="" src="http://pad2.whstatic.com/images/thumb/1/18/Shadow-of-a-Writing-Hand-1834.jpg/-crop-103-80-103px-Shadow-of-a-Writing-Hand-1834.jpg"/>
<img class="rounders2_sprite" src="http://pad1.whstatic.com/skins/WikiHow/images/corner_sprite.png" alt=""/>

Эта же техника обычно используется для теней .

Это сделано потому, что IE не поддерживает много классных CSS 3, например закругленные углы :

moz-border-radius: 5px; -webkit-border-radius: 5px;

Answer 2

Есть несколько способов добиться этого, но в данном случае вот как они это сделали:

Если вы посмотрите в HTML, вы увидите, что <img> находится внутри <a>, а внутри того же <a> находится секунда <img>, corner_sprite.png . Если вы посмотрите на это изображение, вы увидите, что это серия белых углов, которые подходят к разным размерам. Используя CSS, они просто накладывают это изображение поверх изображения, углы которого хотят скруглить, чтобы углы совпали с изображением соответствующего размера. Файл CSS, в котором они это делают, здесь . Поиск "rounders" (CSS beautifier может быть полезным здесь).

Answer 3

Вы также можете сделать это без изображений (прочитайте его где-нибудь, больше не можете найти ссылку), определив это в таблице стилей:

#divallrounded { /* every border rounded */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Answer 4

Попробуйте jquery плагин с закругленными углами . Я думаю, что может сделать то, что вы ищете

Answer 5

На самом деле нет необходимости использовать <img> теги для достижения целей этого сайта. Вы можете сделать все это с помощью CSS (без использования свойств CSS3). Хитрость в закругленных углах заключается в поиске дополнительных элементов для привязки вашего углового изображения в CSS.

См:

Раздвижные двери и Пользовательские углы

Забудьте все эти посты о moz-border-radius и -webkit-border-radius. Свойство CSS3 просто называется border-radius, и все современные браузеры поддерживают его.

Answer 6

Я думаю, что вы ошибаетесь - посмотрите на изображение для этих больших выносок -

http://pad3.whstatic.com/skins/WikiHow/images/actionBox_background_curl.png

... и вот изображение, которое находится поверх основного контейнера div (div.actions_shell) -

http://pad1.whstatic.com/skins/WikiHow/images/actions_top.png

... оба включают закругленные углы.

Что касается миниатюр в разделе «Избранные», они просто перекрывают .png, который прозрачен, за исключением вырезов с закругленными углами белого цвета:

http://pad1.whstatic.com/skins/WikiHow/images/corner_sprite.png

Answer 7

Они используют изображения для скругления углов. Вы можете сделать это с тегами <img>, как они делают, или дать элементы типа <div> s и такие фоновые изображения с помощью CSS.

Их сайт использует округленные изображения ... не уверен, что вы говорите в FireBug, но они округлены. В качестве альтернативы вместо использования отдельных тегов <img> можно использовать фоновые изображения CSS для целых сечений или границ.

Альтернативой является закругленные углы в CSS , но пока не все браузеры поддерживают это.