如果使用此代码,则div的圆角不会剪切图像(结果是图像的方形角覆盖了div的圆角):
<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;"> <img src="big-image.jpg" /> </div>
有谁知道如何获得一个圆形的div来防止子图像溢出?
这可能会或可能不会在您遇到的情况下起作用,但请考虑使图像成为CSS背景。在FF3中,以下工作正常:
<div style =“ 背景图片:url(big-image.jpg); 边界半径:1em; 高度:100px; -moz-border-radius:1em; 宽度:100像素;” > </ div>
我不确定还有另一种解决方法-如果您对图像本身应用边框(例如,1em较深),则会遇到同样的方形角问题。
1em
编辑: 尽管在“为图像添加边框”情况下,图像插图是正确的,只是图像与div元素不齐平。要检查结果,请添加style="border:1em solid black;border-radius:1em;-moz-border- radius:1em;"到img标签中(使用width并height根据需要进行适当设置)。
div
style="border:1em solid black;border-radius:1em;-moz-border- radius:1em;"
img
width
height