Как сделать миниатюру с закругленными углами, «содержащую изображение поста»?

Когда я создаю прямоугольники со скругленными углами в Photoshop, я могу маскировать изображения поверх этих прямоугольников со скругленными углами, чтобы придать им закругленные углы.

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

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

Онлайн пример:

введите описание изображения здесь

Ответы (3)

Этот эффект сделан с помощью CSS.

Просто добавьте border-radiusатрибут к своему изображению, чтобы оно имело закругленные углы.

Пример:

img {
border-radius: 10px;
}

(Это применит его ко всем изображениям)

Вот живой пример , с которым вы можете поиграть.

Поэтому в файле psd, когда я разрабатываю интерфейс, я не должен ничего учитывать, потому что я хочу, чтобы миниатюры были прямоугольником со скругленными углами!
При разработке интерфейса в Photoshop просто используйте то, к чему вы привыкли (используйте маски для округления изображений), но затем, когда вы реализуете этот дизайн на веб-странице, используйте атрибут CSS.
Этот ответ точен, но позвольте мне сказать вам еще одну вещь: вы не можете легко добиться закругленных углов в css для IE , все другие современные браузеры будут действовать соответствующим образом, но IE потребует больше усилий.
Йоханнес: Спасибо, что я делаю, так это выбираю «Прямоугольник» > «Создать форму» > «Выбор прямоугольника со скругленными углами» > «Вычитание (-) формы прямоугольника со скругленными углами из формы прямоугольника. Просто прямоугольник вычитается полем «Прямоугольник со скругленными углами», а затем я помещаю изображение под этим слоем, чтобы он выглядел со скругленными углами. это единственный способ, который я знаю ... проблема, которую я должен изменить размер изображений, чтобы они не отображались по бокам, пожалуйста, посмотрите это изображение img546.imageshack.us/img546/6223/webdesign2s.jpg это хороший способ для CSS или есть лучший способ, если вы не возражаете, пришлите мне учебник.
Есть ли проблема, как я это делаю? или это не имеет значения, потому что все в руках CSS, а не фотошопа? каков оптимальный способ сделать это, если да или нет?
Для этого, я думаю, это будет немного сложнее, и вам нужно будет использовать Javascript.

Вы также можете использовать timthumb, чтобы вам не пришлось беспокоиться о точных размерах изображения для ваших прямоугольников, а затем использовать совет Йоханнеса выше для закругленных углов.

http://www.binarymoon.co.uk/projects/timthumb/

Я понимаю, что ваш вопрос действительно относится к радиусу границы CSS3, но я подумал, что скину эту ссылку на PolyClip , который позволяет создавать векторные маски в веб-браузере. Это позволяет использовать очень маленький файл JPG и обтравочный контур вместо большого файла PNG с альфа-прозрачностью. Так что, если вы хотите обрезать изображения более сложные, чем блоки с закругленными углами, это будет правильный путь.

Привет, JamEs, проблема в том, что я не эксперт по css, все, что мне нужно сделать, это просто передать psd-файлы фотошопа разработчику, так как я работаю на аутсорсинге и хорошо разбираюсь в фотошопе. Поэтому я не знаю, следует ли делать рамки с закругленными углами в файл psd или просто покажите ему его закругленные углы, и он сделает это с помощью css !! 2- эскизы пользователя также имеют закругленные углы, когда я увидел, например, твиттер gui psd, я увидел, что он сделал вектор серой маски с закругленными углами, что я не знаю, должен ли я это делать, потому что я не знаю, как сделать закругленные углы кадры, которые подходят для css. Я могу просто сделать это в целом
Используйте закругленные углы в фотошопе, чтобы показать, что вы хотите, чтобы ваш веб-человек воссоздал, затем он может создать закругленные углы с помощью кода. Если вы кодируете сайт и не знаете, как выводить код, я предлагаю что-то вроде border-radius.com , что позволит вам визуально создать нужное поле, а затем вывести код, который вы сможете скопировать и вставить в таблицу стилей. .
Как сделать миниатюру с закругленными углами, «содержащую изображение поста»?
СпросиСетьПолитика конфиденциальности1y, 0v