Question

问题很简单，但我花了太多时间寻找答案。如果有人能对这个问题稍微说清楚，我会很感激。

CSS -moz-border-radius适用于div，但我正在努力使其适用于img代码。

-webkit-border-radius在Chromium的img上完美无瑕地运作。

我还试图将img包裹在div中，该overflow: hidden;有圆角并使用{{1}}。它适用于Chromium，但在Firefox中没有希望。

Answer 1

你可以将图像作为div的背景然后让div具有圆角

Answer 2

这是一个可以帮助您解决此问题的解决方案

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

Answer 3

我使用以下内容为此页面顶部的动画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>

这就是div的css。

.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;
}

CSS在firefox中的图像上圆角

3 个答案: