Добавьте закругленные углы к растровому изображению прямоугольника

Question

Как лучше всего создать что-то вроде маски с закругленными углами для изображения с использованием CSS / JS / HTML?Итак, мне нужно добавить скругленные углы к прямоугольному изображению.Я думал о добавлении 4 графических элементов, таких как этот над изображением по углам, чтобы скрыть некоторые маленькие части изображения.Здесь красный цвет, например, для использования на красном фоне страницы, а элемент для правого верхнего угла.Проблема с этим решением состоит в том, что я не могу использовать его на сложных фонах, таких как градиенты или другой фон с не плоской заливкой.Я знаю, что в Firefox можно использовать функцию маскировки, но мне нужно более общее решение, которое будет хорошо работать и в других браузерах.Благодаря.

Answer 1

Для этого вы должны использовать CSS border-radius (как описано в другом ответе).Это работает для изображений.

Что упустил предыдущий ответ, так это то, что вы можете поддерживать его в CSS во всех браузерах, включая IE6 / 7/8, используя замечательный небольшой хак под названием CSS3Pie .

Answer 2

Лучший и самый простой способ - использовать свойство CSS3 border-radius:

.box {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

Он работает во всех современных браузерах, кроме IE8 (хотя работает и в новом IE9).

Answer 3

Это сложно понять в одном браузере, не говоря уже о всех распространенных. Я предлагаю вам сделать обработку на стороне сервера. Если вы работаете с PHP, я знаю, что он имеет встроенную библиотеку изображений, которая может работать с полупрозрачными PNG. Это ваша лучшая ставка. Просто «обрежьте» его один раз и сохраните в файловой системе сервера. Ищите эквивалентную библиотеку, если вы не используете PHP.

(Под «кадрированием» я подразумеваю добавление закругленных углов с эффектом альфа-смешения, исчезающим на прозрачном фоне).

Answer 4

плагин jQuery lc_roundz должен выполнять работу динамически - даже если вы хотите, чтобы углы были прозрачными (например, для использования на сложных фонах, ...).

$("image").lc_roundz({  
radius: 20,  // corner-radius  
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original  
newid: "%oid_after_lc_roundz",      // the new ID for the canvas object. %oid will be replaced with the id of the original object  
width: -1,                                                           // -1 uses the original image's width  
height: -1,                    // -1 uses the original image's width  
replace: false,                                          // boolean to decide whether the original should be removed from the DOM  
corner_color: [0,0,0,0]                     // this means TRANSPARENT ... R,G,B,alpha [0-255] each  
}); 

Answer 5

Вы всегда можете использовать изящные углы , если вам это нужно для работы и в старых браузерах.

Или вы можете использовать css border-radius, как указано выше, и просто принять, что в IE6 / 7/8 он будет квадратным.