给对话框加阴影

正常情况下我们会使用box-shadow来添加阴影, 但是如果像下面示例一样不规则的图形会有部分区域不会显示阴影

这是一个带阴影的对话框

只需要把box-shadow: 0 0 5px #000;改为filter: drop-shadow(0 0 3px #000)

这是一个带阴影的对话框

原理

box-shadow 是针对整个盒子设置的阴影, 那就是一个四四方方的。 而我们使用的是filter可以给元素添加滤镜效果, 只会针对盒子里面的像素点来设置阴影, 那些透明像素点的阴影就不会显示。

同理, 我们也可以对一些带有透明背景的图片设置阴影。

完整代码

html

<div style="display: flex; justify-content: center;">
    <div class="bubble bubble_filter">这是一个带阴影的对话框</div>
</div>

css

.bubble {
  position: relative;
  width: 200px;
  background-color:#79AAF9;
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
}

.bubble_shadow {
  box-shadow: 0 0 5px #000;
}

.bubble_filter {
    filter: drop-shadow(0 0 3px #000);
}

.bubble::after {
  content: "";
  position: absolute;
  top: 25%;
  left: -16px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #79AAF9;
  border-left: 8px solid transparent;
  z-index: 1;
}