Php CSS，圆角不起作用

我有两张照片在一起：

代码如下：

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

---

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

你想把你的形象传开！不是DIV

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

---

你想要你的形象圆！不是DIV

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

---

作为替代答案，只要容器

.picture photo

紧紧包裹图像（无可见填充），您就可以添加以下CSS来隐藏从子元素（图像）伸出的角：

---

作为替代答案，只要容器

.picture photo

紧紧包裹图像（无可见填充），您就可以添加以下CSS来隐藏从子元素（图像）伸出的角：

---

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

出于好奇，你能试试下面的吗

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

.picture{
位置：相对位置；
宽度：462px；
高度：305px；
边际：0px；
填充：0px；
背景：url（'http://i.stack.imgur.com/w0mOg.png")不重复;；
背景位置：50%50%；
-moz边界半径：20px；
-webkit边界半径：20px；
-khtml边界半径：20px；
边界半径：20px；
}

---

我有最新版本的firefox，所以我无法检查它是否也适用于旧版本，但如果它适用，那就有意义了。Firefox能够裁剪div已经有相当一段时间了。

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

出于好奇，你能试试下面的吗

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

.picture{
位置：相对位置；
宽度：462px；
高度：305px；
边际：0px；
填充：0px；
背景：url（'http://i.stack.imgur.com/w0mOg.png")不重复;；
背景位置：50%50%；
-moz边界半径：20px；
-webkit边界半径：20px；
-khtml边界半径：20px；
边界半径：20px；
}

---

我有最新版本的firefox，所以我无法检查它是否也适用于旧版本，但如果它适用，那就有意义了。Firefox能够裁剪div已经有相当长的一段时间了。

您使用了哪些浏览器进行了测试？如果这是一个错误，请注意您的

-moz

有50px，其他浏览器有20px。您使用了哪些浏览器进行了测试？如果这是一个错误，请注意

-moz

有50px，其他浏览器有20px。是的，你是对的！但它仍然不起作用（可能还有其他问题？您使用的是哪种浏览器？我已经测试过了，它运行得很好！我认为这一定是浏览器的问题。如果使用Internet Explorer，您必须记住border radius不适用于9.0之前的IE版本。我使用的是firefox 3.6版本，firefox运行得很好！如果您想检查y，请重新开始我们在firefox上的样式表，您应该使用Firebug。如果您的样式被其他样式覆盖，您可以看到它。是的，您是对的！但它仍然不起作用..：（可能还有其他问题？您使用的是哪种浏览器？我已经测试过了，它运行得很好！我认为这一定是浏览器的问题。如果使用Internet Explorer，您必须记住border radius不适用于9.0之前的IE版本。我使用的是firefox 3.6版本，firefox运行得很好！如果您想检查y，请重新开始我们在firefox上的样式表，你应该使用Firebug。如果你的样式被其他样式覆盖，你可以看到它。