CSS，圆角不起作用 [英] CSS, rounded corners not working

问题描述

我有两张图片：

以下是代码：

 < div class =picture> 
< span class =name>< br />< a href =profile.php> Pavadinimas< / a>< / span> 
< div class =picture-content> 
< div class =图标> 
< 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-infosrc =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; 
底部：-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;左：0像素; 
} 
  

但不幸的是，圆角不起作用！为什么不？是否有一些问题我不知道？

解决方案

这是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; 
背景位置：50％50％; 
 -moz-border-radius：20px; 
 -webkit-border-radius：20px; 
 -khtml-border-radius：20px; 
 border-radius：20px; 
} 
 
< div class =picture>< / div> 
  

我拥有最新版本的firefox，所以我无法检查它是否也适用于旧版本，但如果它确实有意义的话。 Firefox已经能够在相当一段时间内对div进行裁剪。

I have two pictures on top of each other:

Here is the code:

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

I want the image at the top to be with rounded corners like this:

My css classes is:

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

But unfortunately rounded corners is not working at all! Why not? Is there some issue I don't know?

解决方案

This is a old problem with firefox (and probably a few other browsers as well); it didn't crop the images until the latest firefox version:

Firefox -moz-border-radius won't crop out image?

Just out of curiosity, can you try the following?:

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

I have the latest version of firefox so I can't check if it works on older versions as well, but it would make sense if it did. Firefox has been able to crop divs for quite some time.

这篇关于CSS，圆角不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！