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，圓角不工作

回答

相關問題