console
<div class="box1">
<div class="box2">
<div class="box3">
测试内容
</div>
</div>
</div>
<br/>
<div class="box4">
<div class="box5">
<div class="box5_1">
</div>
</div>
<div class="box6">
啊啊啊
</div>
</div>
*{
background: rgb(240, 242, 245);
}
.box1{
display: inline-grid;
place-items:center;
margin-left: auto;
background: #fff;
border-radius: 24px;
padding:4px;
}
.box2{
display: inline-grid;
place-items:center;
background: linear-gradient(blue, pink);
margin:8px;
border-radius: 24px;
box-shadow: 0px 0px 6px 1px deepskyblue;
}
.box3{
display: inline-grid;
place-items:center;
margin:8px;
padding: 12px;
border:4px #1890ff solid;
border-radius: 28px;
-webkit-filter: drop-shadow(2px 4px 6px #1890ff);
filter: drop-shadow(2px 4px 6px #1890ff);
}
.box2:hover,.box2:active,.box2:focus{
cursor:pointer;
box-shadow: 0px 0px 1px 1px deepskyblue;
}
.box2:hover>.box3{
}
.box2:active>.box3,.box2:focus>.box3{
-webkit-filter:none;
filter:none;
}
.box4{
display: inline-grid;
place-items:center;
grid-template-columns:auto 1fr;
width:500px;
height: 80px;
}
.box5{
width:80px;
justify-self:start;
height: 80px;
background: #1890ff;
border-radius: 40px;
display: inline-grid;
place-items:center;
}
.box5_1{
display: inline-block;
margin-right: 0;
width:40px;
height: 40px;
border-radius: 20px;
}
.box6{
height:30px;
width: 100%;
background: transparent;
border: 10px #1890ff solid;
border-left: none;
margin-left: -10px;
padding-left: 20px;
border-radius: 0 25px 25px 0 ;
}