xml
复制代码
<body>
<div class="pop">气泡框</div>
</body>
css
复制代码
body{
display: flex;
justify-content: center;
align-items: center;
height: 100%
}
.pop{
display: flex;
justify-content: center;
align-items: center;
background: #409eff;
width: 150px;
height: 70px;
position: relative;
border-radius: 5px;
color: #fff;
/** box-shadow: 0 0 10px #000; 换成filter*/
filter: drop-shadow(0 0 10px #000)
/** filter表示滤镜 drop-shadow表示阴影滤镜 */
}
.pop::before{
content: '';
background: #409eff;
position: absolute;
width: 20px;
height: 20px;
transform: rotate(45deg);
left: -10px;
top: 50%;
margin-top: -10px;
}
