时间戳

首页 > 解决方案 > 如何在 HTML 中为 Tooltip> 的指针添加阴影

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

问题描述

在此处输入图像描述

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

标签： htmlcss

解决方案

您可以尝试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>

推荐阅读