- webkit-border-radius не обрезает изображение должным образом

У меня есть 5 браузеров для рендеринга HTML-кодированных страниц: IE9, Firefox 4.0 и все новейшие версии Chrome, Safari и Opera. Теперь в IE9 и Firefox 4.0 изображение обрезается должным образом с помощью border-radius: and-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;

}

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

10
css css3 html

5 ответов

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

4

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

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

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

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

1

это работает для меня в 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;   
}
1

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

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

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

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

0