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

Ответ 1

Не обрезается ли, если вы примените радиус границы непосредственно к элементу img? Существуют известные проблемы с -moz-border-radius по содержанию содержимого.

- изменить

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

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

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

Ответ 2

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

Ответ 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;
}

Ответ 4

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

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

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

Ответ 5

Я не думаю, что есть способ использовать -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.

Ответ 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" script по этой ссылке:

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

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

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

FF 3.6.16

IE 8

Chrome 12.0

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

Ответ 7

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

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

Ответ 8

img {
 overflow: hidden;

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

Ответ 9

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