如何在 HTML 中为 Tooltip> 的指针添加阴影

Question

我知道我可以绝对定位 Tooltip 的指针，但是如何为指针添加模糊效果？因为如果我给它加上模糊效果，模糊不仅会显示在指针的底部三角形上，还会显示在它的上半部分。

Answer 1

您可以尝试drop-shadow 过滤css效果。

.pointer {
  width: 200px;
  padding: 10px;
  position: relative;
  filter: drop-shadow(0px 0px 10px #b2b2b2);
  background: #fff;
}

.pointer:after {
  content: "";
  position: absolute;
  border: 20px solid;
  border-color: #fff transparent transparent;
  bottom: -40px;
  left: calc(50% - 20px);
}

<div class="pointer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis interdum cursus.</div>

检查过滤器跨浏览器支持

您也可以通过使用box-shadow和z-indexcss 属性来实现这一点。在这种情况下，您需要使用 制作一个额外的块来覆盖阴影的上部:before/:after。

.pointer {
  width: 200px;
  padding: 10px;
  position: relative;
  box-shadow: 0px 0px 10px #b2b2b2;
  background: #fff;
  z-index: 1;
}

.pointer:after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  box-shadow: 0px 0px 10px #b2b2b2;
  bottom: -15px;
  left: calc(50% - 15px);
  background: #fff;
  transform: rotate(45deg);
  z-index: -2;
}

.pointer:before {
  content: "";
  width: 60px;
  height: 30px;
  position: absolute;
  background: #fff;
  left: calc(50% - 30px);
  bottom: 0;
  z-index: -1;
}

<div class="pointer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis interdum cursus.</div>