Как получить идеальный радиус границы на изображениях во всех браузерах?

Question

В настоящее время я получаю это в Chrome , Safari , Mobile Safari и Opera .края неровные.

img {border-radius: 10px; border:3px solid red}

См. этот пример в Google Chrome или Opera или iPad http://jsfiddle.net/4PLUG/2/show/

Границы хороши в Firefox .

и в IE9 края границы хороши, но у него есть другая проблема.это показывает некоторое пространство между границей и изображениями

Как получить результат как Firefox во всех других браузерах?

Answer 1

Вы можете добавить дополнительный div к вашему тегу img следующим образом:

body {padding: 100px}

img {
   vertical-align:bottom;
    position:relative;
    z-index:-1;
}
div{
    overflow:hidden;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border:3px solid red;
    display:inline-block;
}

http://jsfiddle.net/4PLUG/4/

Answer 2

/ * просто убедитесь, что вы включили радиус границы для всех браузеров движков рендеринга * /

.img-border{
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border:3px solid red;
}

Answer 3

все браузеры имеют разные возможности CSS и обрабатывают их по-разному.

если вы хотите, чтобы углы выглядели одинаково во всех браузерах, вам просто нужно поместить кривые в фактическое изображение,не полагайтесь на CSS.

Альтернативой является использование фонового изображения в div, что может улучшить отсечение.

Answer 4

ссылка на изображение в теле:

<img src="image.jpg">

добавьте свой размер к изображению:

<img src="image.jpg" width="100%" height="30%">

Затем добавьте встроенный CSS.

<img src="image.jpg" width="100%" height="30%" style ="border:solid thick black;border-radius="25px">

При добавлении встроенного CSS граница и радиус границы будут действовать на изображение.Просто не стилизуйте это конкретное изображение в таблице стилей, потому что специфичность может помешать встроенному CSS.

Answer 5

для тегов img, радиус границы процента работает отлично:

.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>

Answer 6

Я сделал этот эффект с двумя делителями, используя z-index.

<div class="picture-wrapper">
      <div class="mask">
      </div><!-- end mask -->
      <div class="picture">
           <img src="" />
      </div><!-- end picture -->
</div><!-- end picture-wrapper -->

Установите фоновое изображение на маске на красные границы с вырезанным средним (png), затем используйте z-indexчтобы разместить его над изображением div.

Если работает кросс-браузер, единственное, что он не учитывает динамическую ширину / высоту в изображениях, он предполагает, что все изображения одинаковы.И вы делаете запрос на это дополнительное изображение маски.

На ваше усмотрение.

Answer 7

Возможно, вы захотите попробовать обернуть изображения в элемент блока и переместить 4 деления во всех четырех углах с изображениями границ в качестве фона.Убедитесь, что само изображение также имеет рамку, это значительно упрощает использование границ радиуса в изображениях, если у вас есть изображения более одного размера, которым требуется m.