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;
}
相关推荐
a1117764 天前
唯美花朵风格的黑胶唱片音乐播放器
前端·css·css3
‘’林花谢了春红‘’17 天前
小玩意 生日快乐
css·html·css3
志尊宝1 个月前
Vue3 环境搭建 + 第一个 HelloVue 项目(零基础入门)
vue.js·node.js·vue·css3
More more1 个月前
纯手搓css样式:科技感弹窗边框
css·科技·css3
丨我是张先生丨1 个月前
英语单词 Web Page
前端·css·css3
丨我是张先生丨1 个月前
日语单词 Web Page
前端·css·css3
AI视觉网奇2 个月前
three教学 3d资产拼接源代码
前端·css·css3
神明不懂浪漫2 个月前
【第三章】CSS(一)——基础选择器、CSS的属性
前端·css·html·css3
智码看视界2 个月前
老梁聊全栈:CSS3 高级特性—Flex/Grid 布局体系深度解析
前端·css3·布局·flexbox·grid·工程实践·全栈工程师
gz-郭小敏2 个月前
优化横向滚动展示大量数据的时候数据晃动问题
前端·javascript·html·css3