google-chrome - Chrome/Safari 中奇怪的圆 Angular

Question

我有一个圆 Angular 问题需要帮助。这是生成的 HTML(在 Wordpress 中):

<div class="deal_thumbnail clearfix">
<a href="page.html" title="Read More">
<img width="140" height="110" src="image.jpg" alt="read more" title="Read more" /></a>
</div>

这是 CSS:

.deal_thumbnail
{
    float:left;
    width: 150px; 
}
.deal_thumbnail img
{
    float:left;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 48px;    
}

如果我将最后一个 48px 设置为 18px，它在 FF 中显示良好，在 Chrome/Safari(方形边缘)中根本不圆。

如果我将它保留为 48 像素，它会在 FF 中形成一个巨大的平滑圆 Angular (它应该如此)，这是我在 Chrome/Safari 中得到的:

关于为什么我在 18px 时没有得到任何东西，而在 Chrome/Safari 中在 48px 时得到奇怪的 Angular ，而在 FF 中一切正常，有什么想法吗？

Answer 1

试试这个:

.deal_thumbnail
{
    float:left;
    width: 150px; 
}
.deal_thumbnail img
{
    float:left;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;    
}