内凹圆角

最新推荐文章于 2023-08-15 15:49:08 发布

爱学习的小饼干

最新推荐文章于 2023-08-15 15:49:08 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/weixin_41813243/article/details/116996743

版权

<html>

	<head>

	<meta charset="utf-8" />

	<title></title>
	<style type="text/css">
	.cro {
	width: 100px;
	height: 100px;
	border: 1px solid #58C4E6;
	position: relative;
	}

	.cro_left_top,
	.cro_right_top,
	.cro_left_bottom,
	.cro_right_bottom {
	position: absolute;
	width: 20px;
	height: 20px;
	border: 1px solid #fff;
	z-index: 1;
	background: #fff;
	}

	.cro_left_top {
	top: -1px;
	left: -1px;
	border-radius: 0px 0px 20px 0px;
	border-bottom: 1px solid #58C4E6;
	border-right: 1px solid #58C4E6;
	}

	.cro_right_top {
	top: -1px;
	right: -1px;
	border-radius: 0px 0px 0px 20px;
	border-bottom: 1px solid #58C4E6;
	border-left: 1px solid #58C4E6;
	}

	.cro_left_bottom {
	left: -1px;
	bottom: -1px;
	border-radius: 0px 20px 0px 0px;
	border-top: 1px solid #58C4E6;
	border-right: 1px solid #58C4E6;
	}

	.cro_right_bottom {
	right: -1px;
	bottom: -1px;
	border-radius: 20px 0px 0px 0px;
	border-top: 1px solid #58C4E6;
	border-left: 1px solid #58C4E6;
	}
	</style>

	</head>

	<body>

	<div class="cro">

	<!-- <div class="cro_left_top"></div>

	<div class="cro_right_top"></div> -->

	<div class="cro_left_bottom"></div>

	<div class="cro_right_bottom"></div>

	</div>

	<div class="cro">

	<div class="cro_left_top"></div>

	<div class="cro_right_top"></div>

	<!-- <div class="cro_left_bottom"></div>

	<div class="cro_right_bottom"></div> -->

	</div>

	</body>

	</html>

关注