n-wp.ru — блог о WordPress

Border-radius в разных браузерах

Доброго времени суток и с наступившим послевосьмьемартьем, товарищи.

Столкнулся с проблемой ведя блог про AppStore:

введя классы для изображений приложений в artwork с параметрами:

Все корректно отображается, то есть закругленные углы, в Google Chrome и Safari, как на PC так и на iPhone/iPad,

[img]https://dl-web.dropbox.com/get/screen1.jpg?w=44cf5ff6[/img]

но в Mozilla, Opera и IE — квадратное изображение.

[img]https://dl-web.dropbox.com/get/screen2.jpg?w=6744938d[/img]

Буду благодарен за помощь в этом вопросе, или подсказке по плагинам.

15 комментариев

  • А так?

      • *посмотрел ваш сайт
        вы хотите таким образом фото закруглить?! это не будет работать в firefox и тд
        только на webkit

        • Я открыт для любых предложений по данному вопросу :) Если вы знаете другой и более универсальный способ — буду только рад вашей помощи :)

          • Достаточно тяжёлая вещь на самом деле. Сделать поддержку для всех браузеров.

            Если размер картинки фиксированный — то можно накладывать на картинку div с бэкграундом в виде рамки(прозрачная картинка, и белые углы).

            А раз у сайта фон белый, то проще в фотошопе (или gimp’e) поправлят картинки =)

            Вот статейка(не совсем то, но всё же):
            http://habrahabr.ru/blogs/webdev/30019/
            и вот о свойстве в мозилле
            https://developer.mozilla.org/en/CSS/-moz-border-radius

            • Картинки постоянно 175*175. Просто хотелось бы минимальной кровью отделаться :)
              Каждый раз картинки поправлять в Ps, мягко говоря геморно.
              А есть ли мануал, если попробовать и вправду поверх картинок с выделенным классом, накладывать еще одну картинку с углами прорисованными?

  • Методом тыка и экспериментов удалось кое-что :), но не мне одному кажется, что кривовато, так ведь?
    Добавив в style.css эти строки:

    Получилось:
    [img]https://dl-web.dropbox.com/get/imyworld.JPG[/img]

    На лицо сдвиг и не попадание под рисунок mask179.

    Кто сталкивался с таким?

    • почему маска 177-179, тогда как картинка 175-175?
      я вот такой код сделал:

      и картинка:
      http://attachments-blog.tut.by/2867/files/2011/03/mask175.png

      • Фуф :) Низкий поклон вам, друг мой, Руслан.
        Конечный результат этой эпопеи:

        Примного благодарен вам, ув. Ruslan, tiaurus и BuBlicK, за потраченное время :)