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

Автор iLemmy Опубликовано 09.03.2011 Обновлено 18.01.2023

👍 Научим бесплатно правильно создавать сайты на 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 – квадратное изображение.

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

iLemmy

Оцените автора

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

BuBlicK 09.03.2011 в 11:45

А так?

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;
}

Ответить

iLemmy 09.03.2011 в 12:22

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

Ответить

Ruslan 09.03.2011 в 12:48

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

Ответить
1. iLemmy 09.03.2011 в 13:14
  
  К сожалению, не помогает
  
  Ответить
  1. Ruslan 09.03.2011 в 13:20
    
    *посмотрел ваш сайт
    вы хотите таким образом фото закруглить?! это не будет работать в firefox и тд
    только на webkit
    
    Ответить
    1. iLemmy 09.03.2011 в 13:25
      
      Я открыт для любых предложений по данному вопросу :) Если вы знаете другой и более универсальный способ – буду только рад вашей помощи :)
      
      Ответить
      1. Ruslan 09.03.2011 в 14:32
        
        Достаточно тяжёлая вещь на самом деле. Сделать поддержку для всех браузеров.
        
        Если размер картинки фиксированный – то можно накладывать на картинку div с бэкграундом в виде рамки(прозрачная картинка, и белые углы).
        
        А раз у сайта фон белый, то проще в фотошопе (или gimp’e) поправлят картинки =)
        
        Вот статейка(не совсем то, но всё же):
        http://habrahabr.ru/blogs/webdev/30019/
        и вот о свойстве в мозилле
        https://developer.mozilla.org/en/CSS/-moz-border-radius
        
        Ответить
        
        iLemmy 09.03.2011 в 14:44
        
        Картинки постоянно 175*175. Просто хотелось бы минимальной кровью отделаться :)
        Каждый раз картинки поправлять в Ps, мягко говоря геморно.
        А есть ли мануал, если попробовать и вправду поверх картинок с выделенным классом, накладывать еще одну картинку с углами прорисованными?
        
        Ответить
tiaurus 09.03.2011 в 22:25
```
img.artwork {
border:#fff 1px solid;
Background:#fff;
 -moz-border-radius: 20px;
 border-radius: 20px;
}
```
Мануал на эту тему с примерами: http://www.css3.info/preview/rounded-border/
Ответить
1. iLemmy 10.03.2011 в 11:39
  
  И это не помогает :( Да что ж такое то
  
  Ответить
  1. tiaurus 10.03.2011 в 14:42
    
    Возможно, что где-то в css уже есть правило, описывающее img, и оно главнее, чем то, что вы хотите внедрить. Какую тему используете?
    
    Ответить
    1. iLemmy 10.03.2011 в 15:55
      
      Картинка имеет класс artwork, может влияет, что я ее выставляю alignleft?
      Тема своя :) хотя внешне очень похожа на http://demo.woothemes.com/?name=continuum
      
      Ответить

iLemmy 10.03.2011 в 19:38

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

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

Ответить

Ruslan 10.03.2011 в 21:34

почему маска 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

Ответить

iLemmy 11.03.2011 в 08:42

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

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

Ответить