SOURCE

console 命令行工具 X clear

                    
>
console
<div class="box1">
	<div class="box2">
		<div class="box3">
            测试内容
        </div>
	</div>
</div>

<br/>
<div class="box4">
	<div class="box5">
		<div class="box5_1">
            &nbsp;
        </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;
    /* outline: 2px #fff 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;
    /* background: yellow; */
    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;
    /* background: orange; */
    width:40px;
    height: 40px;
    border-radius: 20px;
}
.box6{
    height:30px;
    width: 100%;
    /* background: orange; */
    background: transparent;
    border: 10px #1890ff solid;
    border-left: none;
    margin-left: -10px;
    padding-left: 20px;
    border-radius: 0 25px 25px 0 ;
}