当前位置: 首页 > news >正文

CSS阴影优化气泡框样式

<body>
<div class="pop">气泡框</div>
</body>
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;
}

在这里插入图片描述

http://www.lryc.cn/news/382481.html

相关文章:

  • 强化安全新篇章:韶关石油化工可燃气体报警器年检解析
  • Centos7 Docker部署PgSQL
  • LeetCode:经典题之21、24 题解及延伸
  • 【C++11】initializer_list详解!
  • 如何在Java中处理UnsupportedOperationException异常?
  • WPS没保存关闭了怎么恢复数据?4个方法(更新版)
  • elementplus el-table(行列互换)转置
  • Gradle 核心之 Task
  • 【React 】折叠面板,点击展开时再请求数据
  • c++学习 文件操作,模板
  • 开源与在线 M3U8 Downloader 项目介绍及使用指南
  • 正则表达式与文本处理器
  • RedisTemplate方法一览表
  • 个人对devops的一点见解
  • HarmonyOS鸿蒙应用开发基础知识
  • Halcon 根据霍夫变换在图像中寻找直线
  • 基于Openmv的追小球的云台
  • 关于scrapy模块中setting.py文件的介绍
  • laravel Blade 指令的趣味性
  • 【面试题】等保(等级保护)的工作流程
  • python调用麦克风和扬声器,并调用阿里云实时语音转文字
  • 描述在React中集成第三方库(如Redux或React Router)的常见模式。
  • JavaScript语法特性篇-空值合并运算符(??)
  • rancher快照备份至S3
  • ChatGPT API教程在线对接OpenAI APIKey技术教程
  • 随心而遇,跟着感觉走
  • LeetCode题练习与总结:只出现一次的数字--136
  • 常见的中间件都在解决什么问题?
  • 微信小程序-scroll-view实现上拉加载和下拉刷新
  • TS中interface和type的区别