如何防止图像溢出带有CSS3的圆角框?

前端之家收集整理的这篇文章主要介绍了如何防止图像溢出带有CSS3的圆角框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我使用这个代码,图像不会被div的圆角削减(导致图像的方角,覆盖div的圆角):
<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
    <img src="big-image.jpg" />
</div>

有谁知道如何获得一个圆润的corder div,以防止儿童图像溢出?

解决方法

这可能或可能不工作在您的情况,但考虑使图像CSS背景。在FF3中,以下工作很好:
<div style="
  background-image:   url(big-image.jpg);
  border-radius:      1em;
  height:             100px;
  -moz-border-radius: 1em;
  width:              100px;"
></div>

我不知道有另一种解决方法 – 如果你应用一个边框到图像本身(比如,1em深),你会得到同样的问题的方角。

编辑:虽然,在“添加边框到图像”的情况下,图像插入是正确的,只是图像不与div元素齐平。要检出结果,请添加style =“border:1em solid black; border-radius:1em; -moz-border-radius:1em;到img标签(如果需要,适当地设置宽度和高度)。

猜你在找的CSS相关文章