Firefox中img上的CSS圆角答案

【问题标题】：CSS rounded corners on img in firefoxFirefox中img上的CSS圆角
【发布时间】：2012-10-02 21:29:31
【问题描述】：

问题很简单，但是我花了太多时间寻找答案。如果有人能解释一下这个问题，我将不胜感激。

CSS -moz-border-radius 与div 一起工作，但我正试图使其在img 标签上工作。

-webkit-border-radius 在 Chromium 中的 img 上完美运行。

我还尝试将img 包裹在div 中，它具有圆角并使用overflow: hidden;。它在 Chromium 中有效，但在 Firefox 中没有希望。

【问题讨论】：

之前有人问过这个问题：stackoverflow.com/questions/1347796/…。好像还没有实现

标签： html css firefox rounded-corners

【解决方案1】：

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

【讨论】：

很棒的技巧。非常感谢，我完全忘记了背景图片。这也将解决基于 khtml 的浏览器的问题。 @Koning Baard XIV 没看懂，Semantics 是什么意思？

【解决方案2】：

这里有一个解决方案可以帮助您解决这个问题

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

【讨论】：

【解决方案3】：

我使用以下内容为页面顶部http://annsummersbysara.co.uk 的动画 gif 的角创建了一个半径。

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

【讨论】：

欢迎您，感谢您的代码片段，Jonathan。这个问题最初是在 2009 年提出的，在其间的 3 年中，Firefox 已经更新，使得“img in a div with overflow:hidden”有效，这是原始海报尝试但未能做到的。所以原来的问题不再是问题了；如果您在 StackOverflow 的内部进行深入搜索，请记得检查您回答问题的日期。
@MidnightLightning +1 深挖掘。不得不佩服这种坚持。这样的事情应该有一个徽章。 :)
@Chamster 谢谢！如果您愿意，您实际上可以 +1 cmets...（悬停并单击向上箭头）;)
@MidnightLightning 当然可以。但它会给你额外的声誉吗？当人们用箭头指向我的 cmets 时，我认为我不会得到任何额外的东西。只有问题/答案...
@Chamster 没错，我并没有因此获得额外的声誉。虽然我也没有因为你只是说“+1”而获得任何声誉。我想这样做既可以为未来的访问者留下视觉上的赞誉，又可以在您不想匿名时发表评论？