当small盒子设置成圆形时，内容会超出圆形吗？为什么
2020-10-08 本文已影响0人
泪滴在琴上
<html>
<style>
body{
background-color: gray;
}
.big{
width: 400px;
height: 400px;
background-color: pink;
}
.small{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
overflow-wrap: break-word;
}
</style>
<body>
<div class="big">
<div class="small">
ddddddddddddddddddddddddddddddddddddddddddd
</div>
</div>
</body>
</html>
会超出圆形。原因如图所示，是因为border-radius只是改变视觉上的效果，实际上盒子占据的空间还是不变的。
微信图片_20201008172414.png
e9bd6e951323b1fcac066c8ace1e99dc_t.gif
关注我，学习更多的前端小知识！
