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

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

Столкнулся с проблемой ведя блог про 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, но в Mozilla, Opera и IE — квадратное изображение.

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

Создай свой первый сайт на WordPress

iLemmy
Оцените автора
Добавить комментарий

  1. BuBlicK

    А так?

    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;
    }
    
    Ответить
    1. iLemmy

      К сожалению нет :( Не то…

      Ответить
  2. Ruslan

    А попробуйте убрать: border-style: hidden;

    Ответить
    1. iLemmy

      К сожалению, не помогает

      Ответить
      1. Ruslan

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

        Ответить
        1. iLemmy

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

          Ответить
          1. Ruslan

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

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

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

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

            Ответить
            1. iLemmy

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

              Ответить
  3. tiaurus
    img.artwork {
    border:#fff 1px solid;
    Background:#fff;
     -moz-border-radius: 20px;
     border-radius: 20px;
    }
    

    Мануал на эту тему с примерами: http://www.css3.info/preview/rounded-border/

    Ответить
    1. iLemmy

      И это не помогает :( Да что ж такое то

      Ответить
      1. tiaurus

        Возможно, что где-то в css уже есть правило, описывающее img, и оно главнее, чем то, что вы хотите внедрить. Какую тему используете?

        Ответить
        1. iLemmy

          Картинка имеет класс artwork, может влияет, что я ее выставляю alignleft?
          Тема своя :) хотя внешне очень похожа на http://demo.woothemes.com/?name=continuum

          Ответить
  4. iLemmy

    Методом тыка и экспериментов удалось кое-что :), но не мне одному кажется, что кривовато, так ведь?
    Добавив в 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.

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

    Ответить
    1. Ruslan

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

      div.artwork > span.mask { display: block; position: absolute; top: 6px; left: 6px; z-index: 1; width: 175px; height: 175px; background: url('mask175.png') no-repeat scroll 0pt 0pt transparent; }

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

      Ответить
      1. iLemmy

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

        .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, за потраченное время :)

        Ответить