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 won't crop out image?

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

.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了很长时间。