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 天前
clip-path裁剪,css的滤镜,动画时间线,css的变量和函数
前端·css·学习·html·css3
fīɡЙtīиɡ ℡2 天前
【SpringAi最新版入门(二)】
java·javascript·css·人工智能·css3
小李子呢02112 天前
前端八股CSS(3)---水平垂直居中的实现方法
前端·css·css3
爱上好庆祝4 天前
svg图片
前端·css·学习·html·css3
hhcccchh5 天前
1.2 CSS 基础选择器、盒模型、flex 布局、grid 布局
前端·css·css3
疯笔码良6 天前
【Vue】自适应布局
javascript·vue.js·css3
林恒smileZAZ12 天前
前端大屏适配方案:rem、vw/vh、scale 到底选哪个?
开发语言·前端·css·css3
酉鬼女又兒12 天前
零基础快速入门前端ES6 核心特性详解与蓝桥杯 Web 考点实践(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·职场和发展·蓝桥杯·es6·css3·html5
我命由我1234513 天前
HTML 开发 - HTML 描述列表标签(<dl>、<dt>、<dd>)
前端·javascript·css·html·css3·html5·js
酉鬼女又兒14 天前
零基础快速入门前端蓝桥杯 Web 备考:AJAX 与 XMLHttpRequest 核心知识点及实战(可用于备赛蓝桥杯Web应用开发)
前端·ajax·职场和发展·蓝桥杯·css3·js