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;
}
相关推荐
LAOLONG-C13 小时前
今日CSS学习浮动->定位
前端·css·css3
凌冰_14 小时前
CSS3 基础(背景-文本效果)
前端·css·css3
知识分享小能手20 小时前
JavaScript学习教程,从入门到精通,XMLHttpRequest 与 Ajax 请求详解(25)
开发语言·javascript·学习·ajax·前端框架·css3·html5
凌冰_2 天前
CSS3 基础(边框效果)
前端·javascript·css3
艾恩小灰灰2 天前
CSS中的`transform-style`属性:3D变换的秘密武器
前端·css·3d·css3·html5·web开发·transform-style
xx24063 天前
CSS3笔记
笔记·学习·css3
666HZ6663 天前
Web前端开发技术——HTML5、CSS3、JavaScript
前端·css3·html5
星空寻流年4 天前
css3新特性第五章(web字体)
前端·css·css3
Sherlock Ma4 天前
CSS零基础入门笔记:狂神版
前端·css·程序人生·跳槽·css3·学习方法·改行学it
星空寻流年5 天前
css3新特性第三章(文本属性)
android·javascript·css3