[英]How to make the image also have rounded corners?
I've been trying to make the image's corner also be rounded but when I apply border-radius
on the div, the image corner dosen't change at all. 我一直在尝试使图像的角也变圆,但是当我在div上应用border-radius
时,图像角完全没有变化。
#bredband { height: 330px; width: 300px; position: relative; background-color: #9099A2; margin: 20px; float:left; border-radius:10px; }
<div id="bredband"> <img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Corinex_Router.jpg" width="300" height="200"> <h3>Bredband</h3> <p>hello world</p> </div>
Add overflow: hidden;
添加overflow: hidden;
to your #bredband
selector. 到您的#bredband
选择器。 That should clip the top corners. 那应该夹住顶部。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.