如果我使用这个代码,图像不会被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标签(如果需要,适当地设置宽度和高度)。