Firefox -moz-border-radius не обрезает изображение?

Question

Кто-нибудь знает способ заставить Firefox обрезать углы, если установлен радиус границы изображения? Содержащий элемент будет работать нормально, но у меня торчат ужасные углы.

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

Answer 1

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

Answer 2

Не обрезается ли, если вы примените радиус границы непосредственно к элементу img? .

Имеется известных проблем с -moz-border-radius.

- редактировать

ОК, он тоже не обрезается img. Если ваше изображение имеет вид png / gif на сплошном фоне, вы можете сделать что-то вроде этого:

img {
    border: 10px solid white;
    -moz-border-radius: 10px;
}

Но если вы пытаетесь получить закругленные углы на фотографии, то в 3.5 это не сработает.

Answer 3

Я думаю, что есть ответ, но извините за мой английский ... Я решил вопрос, поставив еще один div с рамкой и без фона на изображении.

#imageContainer {
  -webkit-border-radius:10px
  -moz-border-radius:10px;
  z-index:1;
}
#borderContainer {
  position:absolute;
  border:1px solid #FFFFFF;
  -webkit-border-radius:10px
  -moz-border-radius:10px;
   z-index:10;
}

Answer 4

img {
 overflow: hidden;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
}

Answer 5

Если вы используете переполнение: скрытый, он не будет отображать торчащие углы изображения.

Кто знает, они все еще могут быть там, просто спрятаны.

Answer 6

.round_image_borders {

    position:relative; // fix for IE8(others not tested)
    z-index:1; // fix for IE8(others not tested)
    width:114px;
    height:114px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior:url(border-radius.htc); // fix for IE8(others not tested)
}

Я получил скрипт "border-radius.htc" по этой ссылке:

http://code.google.com/p/curved-corner/

Для чего он добавляет поддержку закругления углов для IE8. Я также должен был установить position :lative и z-index, потому что в противном случае div (и фоновое изображение) отображались бы под желаемым контейнером div, в который был помещен контейнер (round_image_borders).

Это работает для:

FF 3.6.16

IE 8

Chrome 12.0

И да, размер изображения должен соответствовать размеру div с классом round_image_borders. Но этот обходной путь предназначен для использования с изображениями одинакового размера.

Answer 7

Я не думаю, что есть способ использовать -moz-border-radius для прямого округления изображения в FireFox. Но вы можете смоделировать закругленные углы по старинке с дополнительной разметкой.

Так это выглядит так:

<div id="container">
  <img src="images/fubar.jpg" alt="situation normal" />
  <div class="rounded lt"></div>
  <div class="rounded rt"></div>
  <div class="rounded lb"></div>
  <div class="rounded rb"></div>
</div>

Тогда CSS:

#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}

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

Div углы с фоном PNG-24 будут работать очень хорошо. Если вы можете справиться с неровностями, вы можете использовать GIF-фоны для IE6 или просто полностью удалить фоновое изображение для квадратных углов. Используйте условные комментарии для обслуживания CSS в IE6.

Answer 8

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

Это не сработает, если изображение не будет того же размера, что и div. Если вы не используете новое свойство css в Firefox 3.6, которое позволяет изменять размер фонового изображения, но вряд ли кто-то уже использует 3.6.

Так что я согласен с Алексом, если вы сделаете изображение размером с дива / другого вяза.

Answer 9

Firefox, похоже, обрезает фоновое изображение, поэтому, если вы установите фоновое изображение h1 и примените к нему border-radius, оно будет обрезаться. (только что подтверждено в FF 3.6.12)