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 天前
解决canvas绘图模糊问题
javascript·css·css3
荆州克莱2 天前
Redis | Redis常用命令及示例总结(API)
spring boot·spring·spring cloud·css3·技术
Justinc.2 天前
CSS3_动画(九)
前端·css·css3
暗夜绿2 天前
【CSS3】Flex弹性布局
前端·css·css3·flex·弹性布局
y先森3 天前
css3中的多列布局,用于实现文字像报纸一样的布局
前端·css3
懒羊羊我小弟3 天前
CSS回顾-CSS选择器详解
前端·css·html·css3·html5
辛-夷3 天前
不一样的CSS(二)
前端·css·css3
暴富暴富暴富啦啦啦3 天前
手风琴-js+css
前端·css·css3
Domain-zhuo4 天前
css3的新特性有哪些?
前端·css·css3
荆州克莱4 天前
深入理解Redis(七)----Redis实现分布式锁
spring boot·spring·spring cloud·css3·技术