CSS закругленные углы на IMG в Firefox - PullRequest
Новая
       24

CSS закругленные углы на IMG в Firefox

4 голосов
/ 29 октября 2009

Проблема довольно проста, но я потратил слишком много времени на поиск ответа. Буду признателен, если кто-то сможет пролить немного света на эту проблему.

CSS -moz-border-radius работает с div, но я пытаюсь заставить его работать с img тегами.

-webkit-border-radius работает безупречно на img в Chromium.

Я также пытался обернуть img в div, который имеет закругленные углы и использует overflow: hidden;. Он работает в Chromium, но в Firefox нет надежды.

Ответы [ 3 ]

11 голосов
/ 29 октября 2009

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

1 голос
/ 09 сентября 2012

Я использовал следующее, чтобы создать радиус для углов анимированного GIF в верхней части этой страницы http://annsummersbysara.co.uk.

<div class="slider">
  <a href="http://annsummersbysara.co.uk/party">
    <img style="border: 0px solid ; width: 687px; height: 150px;" 
         alt="Click here to book an Ann Summers Party" 
         title="Click here to book an Ann Summers Party"
         src="images/new_top_banner.gif">
  </a>&nbsp;&nbsp;&nbsp;
</div>

И это CSS для DIV. 

.slider{
    width:          687px;
    height:         150px;
    border:         2px #e5e5e5 solid;
    -moz-border-radius: 8px;
    border-radius:      8px;
    margin-left:        auto;
    margin-right:       auto;
    margin-top:     5px;
    overflow:       hidden;
    text-align:     center;
}
1 голос
/ 03 апреля 2011

Вот решение, которое может помочь вам решить эту проблему

http://learneveryday.net/css/css-round-corner-menu-with-image/

...