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 天前
前端实战:使用 jQuery 与 CSS3 打造动态数据表格与滑块交互
前端·css3·jquery
二级小助手2 天前
二级Web前端选择题高频真题20道与考场避坑笔记
javascript·css3·html5·web前端·计算机二级·二级web·web真题
呼噜想睡觉18 天前
Flex弹性布局
css·html·css3
a11177624 天前
唯美花朵风格的黑胶唱片音乐播放器
前端·css·css3
‘’林花谢了春红‘’1 个月前
小玩意 生日快乐
css·html·css3
志尊宝1 个月前
Vue3 环境搭建 + 第一个 HelloVue 项目(零基础入门)
vue.js·node.js·vue·css3
More more1 个月前
纯手搓css样式:科技感弹窗边框
css·科技·css3
丨我是张先生丨2 个月前
英语单词 Web Page
前端·css·css3
丨我是张先生丨2 个月前
日语单词 Web Page
前端·css·css3
AI视觉网奇2 个月前
three教学 3d资产拼接源代码
前端·css·css3