使用“背景过滤器”和“填充或边界半径”无法正常工作

Question

我正在写一个工具提示，并且想要工具提示的模糊背景。当我添加一些“ padding，border-radius”属性时，它无法正常工作。

图片1：错误

有些地方不模糊

图片2：删除了边框边界半径

尝试不使用ANGULAR（w3school）

我已经尝试过不使用 Angular 了。它看起来也错了。 如果您在左上角看到它，则不会模糊

DEMO Link

c1.component.css

#tooltip {
    /* Add the blur effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Properties */
    position: absolute;
    left: 467px;
    height: auto;
    background-color: rgba(255, 255, 255, 0.788);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    opacity: 1;
    transition: 0.13s;
}

我不知道为什么 Angular 中的这段代码显示出一些模糊的内容。有一些方法可以处理模糊区域。

Stackblitz演示1：也是错误的

由于@Gosha_Fighten提供了stackblitz项目，因此问题仍然如下图所示

图片3：放大

图片4：宽度为自动

图片5：宽度固定为150px（确定）

图片6：顶部仍然不模糊