【html+css】圆角边框

最新推荐文章于 2024-09-16 15:00:49 发布

Jon34567

最新推荐文章于 2024-09-16 15:00:49 发布

阅读量201

点赞数 1

文章标签： CSS 圆形圆角矩形 border-radius 前端开发

本文链接：https://blog.csdn.net/weixin_44377918/article/details/123211026

版权

div {            
	width: 200px;            
	height: 150px;            
	background-color: pink;            
	border-radius: 10px;       
	}        
/* 圆形边框的使用 */        
.yuanxing {            
	width: 200px;            
	height: 200px;            
	background-color: pink;            
	/* border-radius: 100px; */            
	border-radius: 50%;        
	}        
/* 圆角矩形 【高度一半】*/        
.juxing {            
	width: 300px;            
	height: 100px;            
	background-color: purple;            
	border-radius: 50px;        
	}        
/* 设置不同的圆角 */        
.radius {            
	width: 200px;            
	height: 200px;            
	background-color: blue;            
	/* border-radius: 10px 20px 50px 100px; */            
	/* border-radius: 10px  100px; */            
	border-top-left-radius: 10px;            
	border-bottom-left-radius: 10px;        
}