css实现边框内凹

	<div class="box">
		<div class="box2">
		</div>
	</div>

首先创建好盒子结构

	.box{
			width:100px;
			height:100px;
			border:1px solid black;/*设置好外边框*/
			margin:auto;
		}
		.box2{
			position:relative;/*相对于父级对齐*/
			left:-1px;/*将位置移动-1的目的是覆盖住外边框,
			千万不能设置overflow:hidden,否者无法覆盖*/
			top:-1px;
			width:25px;
			height:25px;
			border-right:1px solid black;/*我们保留盒子的
			下,右边框*/
			border-bottom:1px solid black;
			border-radius:0px 0px 40px 0px;/*设置左下角的圆角
			边框*/
			background-color:white;/*最后将盒子背景色设置为白色
			就成功覆盖了外边框*/
		}

效果图:在这里插入图片描述


版权声明:本文为BigDippers原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。