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

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

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

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

img.artwork {
	margin-right: 5px;
	margin-left: 5px; 
	margin-top: 5px; 
	margin-bottom: 5px;
	width: 175px;
	height: 175px;
	-webkit-border-radius: 20x;
	-moz-border-radius: 20px;
	-khtml-border-radius: 20px;
	border-color: white;
	float: left;
	border-style: hidden;
}

Все корректно отображается, то есть закругленные углы, в 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 Комментарии

  1. А так?

    img.artwork {
        margin-right: 5px;
        margin-left: 5px; 
        margin-top: 5px; 
        margin-bottom: 5px;
        width: 175px;
        height: 175px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -khtml-border-radius: 20px;
        border-top-left-radius: 5px 5px;
        border-top-right-radius: 5px 5px;
        border-bottom-right-radius: 5px 5px;
        border-bottom-left-radius: 5px 5px;
        border-radius: 20px;
        border-color: white;
        float: left;
        border-style: hidden;
    }
    
      • *посмотрел ваш сайт
        вы хотите таким образом фото закруглить?! это не будет работать в firefox и тд
        только на webkit

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

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

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

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

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

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

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

    .art-postcontent div.artwork {
        position: relative;
    }
    .art-postcontent.lockup.product div.artwork {
        min-height: 180px;
    }
    .art-postcontent div.artwork:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }
    .art-postcontent div.artwork img.artwork {
        -moz-box-shadow: 0 3px 5px #999999;
        border: 1px solid #FFFFFF;
        height: auto;
        max-width: 190px;
    }
    
    .art-postcontent div.artwork:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }
    
    div.artwork>span.mask{
    display:block;
    position:absolute;
    top:0;
    left:-1px;
    z-index:1;
    width:177px;
    height:179px;
    background:url(images/mask175.png) 0 0 no-repeat;
    }
    

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

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

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

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

        .art-postcontent div.artwork {
            position: relative;
        }
        .art-postcontent.lockup.product div.artwork {
            min-height: 180px;
        }
        
        .art-postcontent div.artwork:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
        .art-postcontent div.artwork img.artwork {
            border: 1px solid #FFFFFF;
            height: auto;
            max-width: 190px;
        }
        
        .art-postcontent div.artwork:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
        
        div.artwork>span.mask{
        display: block; position: absolute; top: 6px; left: 6px; z-index: 1;
        float: left;
        width:175px;
        height:175px;
        background:url(images/mask175.png) 0 0 no-repeat;
        }
        

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

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*