Как создать изображение с закругленным углом или круговое изображение

#javascript #css #image

#javascript #css #изображение

Вопрос:

У меня есть несколько изображений, и я хочу показать их на своей веб-странице. Но проблема в том, что я хочу сделать их углы закругленными. Глубина закругленного угла зависит от того, когда мне нужны приличные закругленные углы, а когда мне нужны очень глубокие закругленные углы, чтобы изображение выглядело круглым.

Как правильно это сделать?

Ответ №1:

Вы можете использовать следующий css:

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

Примечание: — Это не будет работать в IE, за исключением IE9.

1. На самом деле, IE 9 поддерживает border-radius.

2. @Emil: Да, это так. но peoples еще не начали использовать IE9, особенно с Windows XP. Обновленный ответ.

3. @Harry: IE очень популярен, поэтому мы не можем его оставить. есть ли у вас какое-либо другое решение (совместимое с IE).

4. @jams: для IE используйте изогнутый угол . Это решение на javascript. Также смотрите это обсуждение: jonraasch.com/blog/css-rounded-corners-in-all-browsers

5. @Harry: Все это говорит о закругленных углах, но как насчет кругового изображения?

Ответ №2:

 /* Gecko browsers */
-moz-border-radius: 5px; 
/* Webkit browsers */
-webkit-border-radius: 5px; 
/* W3C syntax - likely to be standard so use for future proofing */
border-radius: 5px;

Используйте все 3 для обеспечения максимальной совместимости. IE7 и IE8 не поддерживают border-radius, за исключением IE9. Однако существуют взломы JavaScript, большинство из которых включают в себя кучу элементов размером 1 пиксель, расположенных абсолютно, или используют SVG.

Ответ №3:

Некоторые основные браузеры не поддерживают закругленные углы (хорошо, возможно, один из основных браузеров, который есть… да, IE). Единственный способ получить кроссбраузерное решение — использовать плагин jQuery для закругления углов.

Учебное пособие по закругленным углам

Ответ №4:

Перейдите сюда

Здесь автоматически генерируются все CSS, специфичные для браузера

http://css3generator.com/

или