CSS阴影优化气泡框样式

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;
}
相关推荐
自动花钱机1 天前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
-代号95272 天前
【JavaScript】十四、轮播图
javascript·css·css3
Enti7c2 天前
HTML5和CSS3的一些特性
开发语言·css3
自动花钱机2 天前
ESLint语法报错
前端·javascript·vue.js·css3·html5
木木黄木木3 天前
使用HTML5和CSS3实现炫酷的3D立方体动画
3d·css3·html5
一只月月鸟呀3 天前
HTML中数字和字母不换行显示
前端·html·css3
love黄甜心4 天前
CSS3:深度解析与实战应用
前端·css·css3
知识分享小能手4 天前
CSS3学习教程,从入门到精通, 学院网站完整项目 - HTML5 + CSS3 实现(25)
前端·javascript·css·学习·css3·html5·前端项目
beibeibeiooo4 天前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
跟着汪老师学编程5 天前
28、web前端开发之CSS3(五)
前端·css·css3