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;
}
相关推荐
边界条件╝2 天前
CSS3 高阶使用技巧实战
前端·css·css3
潇凝子潇2 天前
大陆手机号生成器
css·html·css3
暗冰ཏོ8 天前
CSS 超详细讲解(从基础到高级实战)
前端·css·css3·sass·scss
摇滚侠9 天前
14 响应式网页 WEB 前端 WEB 开发 HTML5 + CSS3 + 移动 WEB
前端·css3·html5
摇滚侠9 天前
13 移动端 WEB 前端 WEB 开发 HTML5 + CSS3 + 移动 WEB
前端·css3·html5
Martin -Tang10 天前
uniapp 实现录音操作,长按录音,放开取消
前端·javascript·vue.js·uni-app·css3·录音
向日的葵00611 天前
CSDN博客文章-爪印之约宠物收养管理系统
mysql·css3·html5·fastapi·宠物
Boop_wu12 天前
[前端] CSS 常用样式(聊天界面 / 网页布局专用)
前端·css·css3
辞忧九千七12 天前
前后端分离架构实战与项目落地:AI智能学习笔记管理系统
python·html·axios·css3·fastapi·dify
rising start12 天前
InsightEdu - 轻量智能学习平台
javascript·axios·css3·html5·fastapi·orm·dify