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;
}
相关推荐
小九今天不码代码6 天前
CSS 九宫格拼图动画效果实现与原理解析
css·css3·动画效果·css动画·grid布局·css技巧·九宫格布局
QmZVLlLHvXq15 天前
汇川多合一上位机软件 支持宇通,东风凯普特,陕汽德龙等多车型 支持数据读取,修改,故障码读取
css3
程序员林北北18 天前
【前端进阶之旅】3 道前端超难面试题深度解析(2026 版)|附完整代码 + 实战场景
前端·javascript·css3·html5
Kyl2n19 天前
【密码口令保存小工具】
javascript·css·css3
银烛木19 天前
黑马程序员前端h5+css3
前端·css·css3
m0_6070766019 天前
CSS3 转换,快手前端面试经验,隔壁都馋哭了
前端·面试·css3
听海边涛声19 天前
CSS3 图片模糊处理
前端·css·css3
IT、木易19 天前
css3 backdrop-filter 在移动端 Safari 上导致渲染性能急剧下降的优化方案有哪些?
前端·css3·safari
henry10101020 天前
DeepSeek生成的网页小游戏 - 迷宫探险
css·游戏·html·css3
cvcode_study21 天前
PHP8 编程入门课程
开发语言·javascript·php·css3·html5