CSS笔记6-圆角边框

最新推荐文章于 2023-09-15 17:42:11 发布

PIUYIXIU

最新推荐文章于 2023-09-15 17:42:11 发布

阅读量133

点赞数 1

本文链接：https://blog.csdn.net/PIUYIXIU/article/details/109374889

版权

圆角边框

<html>
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style type="text/css">
	div:first-of-type{
		box-shadow:gray 10px 10px 30px;   /*外阴影 颜色 xy坐标 渲染面积*/
		box-shadow:inset orange 10px 10px 30px;   /*内阴影 颜色 xy坐标 渲染面积*/
		width:300px;
		height:300px;
		border:solid;
		border-radius:10px 50px 100px 200px;  /*圆弧边框*/
	}
	div:nth-of-type(2){
		width:300px;
		height:150px;
		border:solid;
		border-radius:300px 300px 0px 0px; /*半圆边框*/
	}
	div:nth-of-type(3){
		width:300px;
		height:300px;
		border:solid;
		border-radius:300px 300px 300px 300px; /*圆形边框*/
	}
	div:nth-of-type(4){
		width:300px;
		height:300px;
		border:solid;
		border-radius:300px 0px 0px 0px; /*扇形边框*/
	}
</style>
</head>
<body>
	<div>
	</div>
	<div>
	</div>
	<div>
	</div>
	<div>
	</div>
</body>
</html>