软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

如何防止图像溢出带有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标签(如果需要,适当地设置宽度和高度)。

总结

以上是为你收集整理的如何防止图像溢出带有CSS3的圆角框?全部内容,希望文章能够帮你解决如何防止图像溢出带有CSS3的圆角框?所遇到的程序开发问题。