border-radius溢出问题

border-radius溢出问题

今天在开发项目时遇到了border-radius的溢出问题，当我给外层ul设置一个border-radius时，内层li的内容就出现了溢出问题，会超过外层的border-radius。
CSS

image-20240710180321449

1
2
3
4
5
6
.index-list-img{
	width: 212rpx;
	height: 212rpx;
	position: relative;
	border-radius: 30rpx;
}

解决方案：在父元素ul的样式中添加overflow:hidden，这样超过ul的元素就会被隐藏。

1
2
3
4
5
6
7
.index-list-img{
	width: 212rpx;
	height: 212rpx;
	position: relative;
	border-radius: 30rpx;
	overflow: hidden;
}

效果：

image-20240710180440031