blocks|key|1465720|text|如果将边界半径直接应用于img元素，它是否不会被裁剪？这里有known+issues+with+-moz-border-radius+as+far+as+contained+content+is+concerned。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1465721|--编辑|1465722|好吧，它也不裁剪img。如果你的图片是某种png/gif格式的纯背景图片，你可以这样做：|1465723|img+{
++++border:+10px+solid+white;
++++-moz-border-radius:+10px;
}|code-block|syntax|javascript|1465724|但是，如果你试图在照片上获得圆角，那么它在3.5中是不会起作用的。|1465725|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1280339/have-border-radius-cover-inner-divs/1280368#1280368^0|C|3|U|25|0|0|0|8|3|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|19|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>Does it not crop if you apply the border radius directly to the <code>img</code> element?  There are <a href="https://stackoverflow.com/questions/1280339/have-border-radius-cover-inner-divs/1280368#1280368">known issues with -moz-border-radius as far as contained content is concerned</a>.</p>

<p>--edit</p>

<p>OK, it doesn't crop <code>img</code> either.  If your image is some sort of png/gif on a solid background you may be able to do something like this:</p>

<pre><code>img {
    border: 10px solid white;
    -moz-border-radius: 10px;
}
</code></pre>

<p>But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.</p>


blocks|key|1465772|text|解决方法:将图像设置为容器元素的背景，然后在该元素上添加边框半径。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1465773|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Workaround: Set the image as the background of a container element, then add border radius on that element. </p>


blocks|key|1250947|text|我想已经有了答案，但很抱歉我的英语……我解决了这个问题，在图像上添加了另一个带有边框而没有背景颜色的div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1250948|#imageContainer+{
++-webkit-border-radius:10px
++-moz-border-radius:10px;
++z-index:1;
}
#borderContainer+{
++position:absolute;
++border:1px+solid+#FFFFFF;
++-webkit-border-radius:10px
++-moz-border-radius:10px;
+++z-index:10;
}|code-block|syntax|javascript|1250949|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I think to have the answer but sorry for my english...
I resolved the question putting another div with border and no background color over the image.</p>

<pre><code>#imageContainer {
  -webkit-border-radius:10px
  -moz-border-radius:10px;
  z-index:1;
}
#borderContainer {
  position:absolute;
  border:1px solid #FFFFFF;
  -webkit-border-radius:10px
  -moz-border-radius:10px;
   z-index:10;
}
</code></pre>


blocks|key|1251051|text|我不认为有一种方法可以在FireFox中使用-moz-border-radius直接对图像进行圆周处理。但是你可以用老式的方式模拟圆角，用额外的标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1251052|所以看起来是这样的：|1251053|<div+id="container">
++<img+src="images/fubar.jpg"+alt="situation+normal"+/>
++<div+class="rounded+lt"></div>
++<div+class="rounded+rt"></div>
++<div+class="rounded+lb"></div>
++<div+class="rounded+rb"></div>
</div>|code-block|syntax|javascript|1251054|然后是CSS：|1251055|#container+{position:relative;}
#container+img+{z-index:0;}
.rounded+{position:absolute;+z-index:1;+width:20px;+height:20px;}
.lt+{background:url('images/rounded_LT.png')+left+top+no-repeat;}
.rt+{background:url('images/rounded_RT.png')+right+top+no-repeat;}
.lb+{background:url('images/rounded_LB.png')+left+bottom+no-repeat;}
.rb+{background:url('images/rounded_RB.png')+right+bottom+no-repeat;}|1251056|角落的背景图像看起来有点像新月，透明。这是一种负空间技术，在这种技术中，您可以通过角的透明度显示图像。|1251057|具有PNG-24背景的Div角将工作得非常好。如果您可以处理锯齿，您可以使用IE6的GIF背景，或只是完全删除方形角落的背景图像。使用条件注释将CSS提供给IE6。|1251058|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I don't think there is a way to use -moz-border-radius to directly round an image in FireFox.  But you can simulate the rounded corners the old fashioned way, with extra markup.</p>

<p>So that looks like this:</p>

<pre><code>&lt;div id="container"&gt;
  &lt;img src="images/fubar.jpg" alt="situation normal" /&gt;
  &lt;div class="rounded lt"&gt;&lt;/div&gt;
  &lt;div class="rounded rt"&gt;&lt;/div&gt;
  &lt;div class="rounded lb"&gt;&lt;/div&gt;
  &lt;div class="rounded rb"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Then the CSS:</p>

<pre><code>#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}
</code></pre>

<p>The background images of the corners look sort of like a crescent moon, with transparency.  This is a negative space technique, where you are allowing the image to show through where the corners have their transparency.</p>

<p>Div corners with PNG-24 backgrounds will work very nicely. If you can deal with the jagginess, you can use GIF backgrounds for IE6, or just remove background image entirely for square corners.  Use conditional comments to serve the CSS to IE6.</p>


blocks|key|1251460|text|.round_image_borders+{

++++position:relative;+//+fix+for+IE8(others+not+tested)
++++z-index:1;+//+fix+for+IE8(others+not+tested)
++++width:114px;
++++height:114px;
++++-moz-border-radius:+15px;
++++-webkit-border-radius:+15px;
++++border-radius:+15px;
++++behavior:url(border-radius.htc);+//+fix+for+IE8(others+not+tested)
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1251461|我从这个链接获得了"border-radius.htc“脚本：|unstyled|1251462|http://code.google.com/p/curved-corner/|offset|length|1251463|它的作用是为IE8添加对圆角的支持。我还必须设置position:relative和z-index，因为否则div+(和背景图像)将显示在放置容器(Round_image_borders)+div的所需div容器下。|1251464|这适用于：|1251465|FF+3.6.16|1251466|IE+8|1251467|Chrome+12.0|1251468|是的，图像的大小必须与类为round_image_borders的div相同。但此解决方法旨在用于所有大小相同的图像。|1251469|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|13|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|15|8|@]|9|@$I|16|J|17|1|18]]|A|$]]|$1|K|3|L|5|F|7|19|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|1C|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1D|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1E|8|@]|9|@]|A|$]]|$1|W|3|-4|5|F|7|1F|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|H]]]]

<pre><code>.round_image_borders {

    position:relative; // fix for IE8(others not tested)
    z-index:1; // fix for IE8(others not tested)
    width:114px;
    height:114px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior:url(border-radius.htc); // fix for IE8(others not tested)
}
</code></pre>

<p>I got the "border-radius.htc" script from this link:</p>

<p><a href="http://code.google.com/p/curved-corner/" rel="nofollow">http://code.google.com/p/curved-corner/</a></p>

<p>What it does it adds support for round corners for IE8. I also had to set position:relative and z-index, because otherwise the div(and the background image) would show under the desired div container in which the container(round_image_borders) div was put.</p>

<p>This works for:</p>

<p>FF 3.6.16</p>

<p>IE 8</p>

<p>Chrome 12.0</p>

<p>And yes, the image must have the same size as the div with the class round_image_borders. But this workaround is intended to be used with images that all have the same size.</p>


blocks|key|1251533|text|如果你使用overflow:+hidden，它将不会显示突出的图像边角。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1251534|谁知道呢，他们可能还在那里，只是藏起来了。|1251535|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>If you use overflow: hidden it won't display the image corners sticking out.</p>

<p>Who knows, they still might be there, just hidden.</p>


blocks|key|1466352|text|img+{
+overflow:+hidden;

+-webkit-border-radius:+10px;
+-moz-border-radius:+10px;
+-o-border-radius:+10px;
+-ms-border-radius:+10px;
+border-radius:+10px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1466353|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>img {
 overflow: hidden;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
}
</code></pre>


blocks|key|1465987|text|火狐似乎确实裁剪了一个背景图像，所以如果你设置了一个h1背景图像并应用了边框半径，它就会裁剪。(仅在FF+3.6.12中验证)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1465988|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Firefox does seem to clip a background image, so if you set an h1 background image and apply border-radius to that it will clip. (just verified in FF 3.6.12)</p>


<p>Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out. </p>

<p>Any way to fix this without setting the image as a background image or processing it before I put it on my site?</p>


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

如果设置了图片的边框半径，有没有人知道如何让Firefox裁剪边角？它的包含元素可以很好的工作，但我得到丑陋的角落突出。有没有办法在不将图片设置为背景图片或在我将其放到我的网站之前对其进行处理的情况下修复这个问题？

问火狐-moz-边框-半径不会裁剪出图像？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问火狐-moz-边框-半径不会裁剪出图像？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问火狐-moz-边框-半径不会裁剪出图像？
EN