Html 如何防止图像溢出圆角框？

如果我使用此代码，图像不会被div的圆角剪裁（导致图像的方角覆盖div的圆角）：

---

是否有人知道如何得到一个完整的视频文件来防止一个孩子的图像溢出？

< P>这可能对你的情况起作用，也可能不起作用，但是考虑让图像成为CSS背景。在FF3中，以下功能可以正常工作：

<div style=" background-image: url(big-image.jpg); border-radius: 1em; height: 100px; -moz-border-radius: 1em; width: 100px;" ></div> 我不确定是否还有其他解决方法-如果将边框应用于图像本身（例如，

1em

deep），则会遇到同样的方形角问题

---

编辑：尽管在“向图像添加边框”的情况下，图像插入是正确的，但只是图像没有与

div

元素齐平。要查看结果，请将

style=“border:1em纯黑；border radius:1em；-moz border radius:1em；”

添加到

img

标记中（必要时适当设置

width

和

height

。

如果将图像设置为背景图像而不是内容，则图像不会剪裁圆角（至少在FF3中）

---

您还可以向div添加填充，或为图像添加边距，以便在圆角边框和图像之间添加额外的填充。

如果希望div剪裁图像，则需要使用overflow:hidden指定确切的宽度和高度，即使

overflow

设置为

hidden

，

边框半径

也不会剪辑它的内容。这是设计的

一种解决方案是在图像及其容器上设置

边界半径

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>



另一种方法是使用
background image
将图像设置为容器的背景；但在Firefox版本3之前的版本中，此方法存在问题（请参阅）-这不需要太麻烦您。
尝试以下解决方法：

img
标签中的图像存在，您可以在那里设置宽度和高度
然后用
可见性隐藏它：hidden
。宽度和高度保持不变
之后，您将设置与背景图像相同的源，它将被剪裁


#呼，拇指{
背景重复：无重复；
背景位置：左上；
边框：3px#e5dacf实心；
显示：块；
浮动：左；}
#页面。拇指img{
显示：块；
可见性：隐藏；}
我最新的Chrome、Firefox和Safari将图像剪辑到容器的边界半径（如预期的那样）


在Firefox15中，我看到当容器有
{overflow:hidden}
时图像被剪辑（子内容的剪辑似乎已经被删除）

在Chrome 23和Safari 5中，当容器有
{position:static；overflow:hidden}
并且图像有
{position:static}
时，我只看到图像被剪裁，
img
标签上的一个简单的
边框半径在当前版本的Safari 5、Chrome 16、Firefox 9:

<div>
    <img src="big-image.jpg" style="border-radius: 1em;" />
</div>

我认为当图像或图像的父对象为position:absolute时会出现此问题。这是可以理解的，因为设置absolute会将元素从文档流中移除

我90%确定我已经看到了一个解决方案，我会在更新后更新这篇文章：D
css3中现在也有背景剪辑。它在所有主要浏览器中都能工作。选项有边框框、填充框和内容框。在你的情况下，我想你会想使用填充框

-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;

额外的裁剪通常仅在边界厚度的误差范围内。只需让内径稍微小一点，使误差范围落在边界下方，而不是靠近is

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>


我不认为边界半径对FF3或Safari 4中的图像有影响（使用-moz和-webkit前缀）。当图像比div大时，这也不起作用，这种情况会导致你首先想要剪辑图像。如果这是设计的，对我来说似乎是糟糕的设计。或者剪辑失败有什么隐藏的好处？我不认为这是设计的。他说“剪切到边框或填充边的其他效果（如“可见”以外的“溢出”）也必须剪切到曲线上。“是的，看起来这是可行的。不幸的是，溢出不能像处理非边框半径样式的div那样工作。与背景图像和边框（尤其是非不透明边框）相关：MDN:注意：”InternetExplorer7，但不是InternetExplorer的其他版本，其行为类似于背景剪辑：溢出时填充：隐藏|自动|滚动。添加图像作为背景会更改图像的语义，并在以后由浏览器加载。Corners按我最新的Chrome、Firefox和Safari中的预期剪辑图像：我喜欢这样。=]
-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>