CSS，圆角不工作

我对彼此顶部两个图片：CSS，圆角不工作

enter image description here

下面是代码：

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

我想在顶部与图像圆角这样的：

enter image description here

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

但不幸的是圆角不工作！为什么不？有没有我不知道的问题？

来源

2011-11-17 Lina

你测试过哪些浏览器？ – budwiser

为防万一，这是一个错误，请注意，您有50px的'-moz'和20px的其他人。 –

这是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。

来源

2011-11-17 07:53:57 NekaraNef

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

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

来源

2011-11-17 07:23:04 Kannika

是的，你是对的！但它仍然没有工作.. :(也许还有其他错误？ – Lina

您使用哪个浏览器？我已经测试过它，并且它运行良好！ – Kannika

我认为这必须是浏览器问题。如果使用Internet Explorer，请记住，border-radius不适用于9.0之前的IE版本 – budwiser

作为备选答案，只要.picture-photo包紧的图像（不可见的填充）周围的容器，你可以添加以下CSS来隐藏从子元素伸出角（图像）：

.picture-photo { 
    overflow:hidden; 
}

来源

2011-11-17 07:39:15

CSS，圆角不工作

回答

相关问题