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;
}
相关推荐
黎金安3 小时前
前端第二次作业
前端·css·css3
Justinc.6 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge7 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
我要洋人死10 小时前
导航栏及下拉菜单的实现
前端·css·css3
荆州克莱1 天前
[FE] React 初窥门径(四):React 组件的加载过程(render 阶段)
spring boot·spring·spring cloud·css3·技术
前端Hardy1 天前
超萌!HTML&CSS:打造趣味动画卡通 dog
前端·css·html·css3
荆州克莱2 天前
VUE2升级成VUE3的优化与区别
spring boot·spring·spring cloud·css3·技术
我命由我123452 天前
CesiumJS 案例 P20:监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点
开发语言·前端·javascript·前端框架·html·css3·html5
顾辰呀2 天前
css 文字一行没有放满不进行换行
前端·javascript·css·vue.js·css3
nixiaoge2 天前
Web前端第二次作业
前端·javascript·css3