#ИМЯ?

У меня есть 5 браузеров для рендеринга html-кодированных страниц: IE9, Firefox 4.0 и всех новейших версий Chrome, Safari и Opera. Теперь в IE9 и Firefox 4.0 изображение обрезается правильно при использовании border-radius: и -moz-border-radius: но не работает в Opera, Chrome и Safari, используя -webkit-border-radius:. В Opera изображение вообще не обрезается, а с помощью Safari и Chrome изображение несколько обрезается, но при этом граница также обрезается.

.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;

}

Если у вас есть один из трех упомянутых браузеров, которые используют -webkit-border-radius: пожалуйста, просмотрите изображения, например, о том, что у меня есть проблема: Графическая страница

Ответы

Ответ 1

Что вы можете сделать, это поместить весь стиль в тег <img> сейчас, на родительский <a> вместо этого, чтобы использовать его как контейнер для изображения. Это, по крайней мере для меня, имеет больше смысла. Не забудьте сохранить float: left на изображении, чтобы избавиться от нижнего поля phantom.

Ответ 2

Я думаю, потому что он находится на переднем плане над границей

попробуйте использовать тот же код, что и вы, но в html:

<div class="nonTyp" style="background-image:url('image.jpg');"></div>

Ответ 3

Это, вероятно, связано с порядком, в котором применяется клип границы и радиуса, но это очень странно. Решение заключается в перемещении радиуса границы и связанных с ним определений в охватывающий тег. Не забудьте объявить display:block, чтобы он рассматривался как уровень блока во всех браузерах.

Ответ 4

Это работало для меня в Chrome и Safari.

Изображение верхнего уровня.

div.someclass с радиусом 5px и div.someclass img с радиусом 4px.

Кажется, что углы выглядят чище в Chrome и Safari.

.someclass {
  ...
  border: 1px solid #000;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px; 
          border-radius: 5px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
  -webkit-box-shadow: 0px 0px 5px #000; 
     -moz-box-shadow: 0px 0px 5px #000;
          box-shadow: 0px 0px 5px #000; 
}

.someclass img {
  ...
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px; 
          border-radius: 4px;   
}

Ответ 5

Я думаю, что функции рисования, используемые Chrome для изображения и ссылки, работают по-разному между собой. И это создает пробел между изображением и ссылкой.

Я частично исправил эту ошибку, немного изменив код jsfiddle Matjis. Я переместил позицию тэгов img влево.

.gallery a img {
...
position:relative;
left: 2px;
}

Это решение может работать, если вы задаете разные значения радиуса для изображения и ссылки.