Css 透明背景覆盖框阴影

我试图用CSS创建下面的效果，但是我在透明背景方面遇到了问题。就好像背景没有真正变得透明，仍然覆盖着框阴影

我想要的是：

我所拥有的：

这是我的密码

        .button {
            border-radius: 500px;
            display: inline-block;
            background-color: transparent;
            border: 2px solid black;
            color: white;
            font-family: "Quicksand", sans-serif;
            font-size: 250%;
            letter-spacing: 2px;
            text-align: center;
            padding: 20px 100px;
            font-weight: 900;
            -webkit-box-shadow: 10px 10px 0px 0px rgba(140,122,230,1);
            -moz-box-shadow: 10px 10px 0px 0px rgba(140,122,230,1);
            box-shadow: 10px 10px 0px 0px rgba(140,122,230,1);
            -webkit-text-stroke: 2px black;
        }

---

这里面临的问题是

shadow

属性。CSS阴影总是出现在元素的后面，它也不会透过透明的背景看到。因此，这里有一个小技巧，您可以使用CSS

position

property实现预期的行为

。但是容器{
显示器：flex；
位置：相对位置；
宽度：300px；
高度：100px；
}
钮扣{
z指数：1；
宽度：100%；
身高：100%；
位置：绝对位置；
背景色：透明；
背景重复：无重复；
光标：指针；
溢出：隐藏；
大纲：无；
边界半径：500px；
显示：内联块；
边框：2件纯黑；
颜色：白色；
字体系列：“流沙”，无衬线；
字体大小：250%；
字母间距：2px；
文本对齐：居中；
填充：20px 100px；
字号：900；
-webkit文本笔划：2px黑色；
}
.但是阴影{
z指数：-1；
最高：8%；
左：3%；
边界半径：500px；
显示：内联块；
背景色：rgba（140122230,1）；
身高：100%；
宽度：100%；
位置：绝对位置；
}

去

请发布您的代码。