CSS，圆角不起作用

Question

我有两张彼此重叠的照片：

这是代码：

<div class="picture">
         <span class="name"><br/><a  href="profile.php">Pavadinimas</a></span>
         <div class="picture-content">
              <div class="icons">
                   <div class="ico-info"><img src="images/product_mark_1.png" />
                        <span class="ico-info">Automatinis mechanizmas</span>
                   </div>
                   <div class="ico-info"><img class="ico-info" src="images/product_mark_2.png" />
                        <span class="ico-info">Miegamas mechanizmas</span>
                   </div>
                   <div class="ico-info"><img src="images/product_mark_3.png" /><br/>
                       <span class="info">Spyruoklės</span>
                </div>  
             </div>
             <div class="picture-grey"><img alt="" src="images/grey.png" />
             </div>
        </div>
             <div class="picture-photo"><img alt="" src="images/pic.png" />
                    <div class="description1">
                    Ilgis/Plotis/Aukštis
                    </div>
                    <div class="description2">
                    Ilgis/Plotis
                    </div>
                    <div class="description3">
                    300/300/300
                    </div>
                    <div class="description4">
                    miegamoji dalis 100/100
                   </div>
            </div>
</div>

我希望顶部的图像具有圆角，如下所示：

我的CSS类是：

.picture{ 
    position:relative; 
    width:400px; 
    height:200px;
    float:left;
    margin-left:48px;
    margin-right:35px;
    margin-bottom:90px;
    margin-top:10px;
}

.picture-content{ 
    position:absolute; 
    bottom:0px; 
    width:360px; 
    height:211px;
}

.picture-grey{
    position:absolute; 
    bottom:-65px; 
    left:15px; 
    height:243px;
    width:407px; 
    float:left;
}

.picture-photo{
    position:absolute; 
    width:380px; 
    height:223px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    top:0px; left:0px; 
}

但是不幸的是，圆角根本不起作用！ 为什么不？ 有我不知道的问题吗？

Answer 1

你想让你的形象圆润！ 不是DIV！

.picture-photo img {
    width:380px; 
    height:223px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

Answer 2

作为替代答案，只要容器.picture-photo紧紧围绕图像（没有可见的填充），您可以添加以下CSS以隐藏从子元素（图像）伸出的角：

.picture-photo {
    overflow:hidden;
}

Answer 3

这是Firefox的老问题（可能还有其他一些浏览器）； 直到最新的Firefox版本都没有裁剪图像：

Firefox -moz-border-radius不会裁剪图像吗？

出于好奇，您可以尝试以下方法吗：

.picture{ 
position:relative; 
width:462px; 
height:305px;
margin:0px;
padding:0px;
background:url('http://i.stack.imgur.com/w0mOg.png') no-repeat; 
background-position:50% 50%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

<div class="picture"></div>

我拥有最新版本的firefox，因此我无法检查它是否也适用于较旧的版本，但是如果可行，这将是有意义的。 Firefox已经能够裁剪div很长时间了。