让每一层父盒子和子盒子width,height相同,然后通过padding实现远视图效果
代码:
<style>
.content1{
width: 100px;
height: 100px;
background-color: darkslategray;
}
.content{
width: 100px;
height: 100px;
padding: 50px;
background-color: #333333;
}
.box{
width: 200px;
height: 200px;
padding: 50px;
background-color: orange;
}
.wrapper{
margin: 50px auto;
width: 300px;
height: 300px;
padding: 50px;
background-color: teal;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="content">
<div class="content1"></div>
</div>
</div>
</div>
</body>
效果图:
可以对其进行改造,如果在css代码中加上这一句
div{
border-radius: 50%;
}
就是圆形的效果图: