解决方法
你不能用边框做到这一点.
有趣的是,你可以用大纲来做
* {
Box-sizing: border-Box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
border:12px solid #663399;
outline: 12px solid red;
padding:25px
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}
<div class="parent"> <div class="child"></div> </div>
其他选择
使用伪元素
1.带边框的伪元素
需要一些额外的变换才能轻推到位.
* {
Box-sizing: border-Box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
padding: 25px;
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}
.absolute::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
border: 12px solid red;
}
<div class="parent absolute"> <div class="child"></div> </div>
2.具有盒阴影的伪元素
* {
Box-sizing: border-Box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
padding: 25px;
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}
.shadow::after {
content: '';
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
Box-shadow: 0 0 0 12px red;
}
<div class="parent shadow"> <div class="child"></div> </div>
