透明背景覆盖框阴影

Question

我正在尝试使用 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;
        }

Answer 1

您在这里遇到的问题与shadow财产有关。CSS 阴影总是出现在元素后面，并且它也不会透过透明背景看到。所以这里有一个小技巧，你可以通过 CSS 属性实现预期的行为position。

.but-container{
    display: flex;
    position: relative;
    width: 300px;
    height: 100px;
}
button{
    z-index:1;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: Transparent;
    background-repeat:no-repeat;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    border-radius: 500px;
    display: inline-block;
    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-text-stroke: 2px black;
}
.but-shadow{
    z-index: -1;
    top: 8%;
    left: 3%;
    border-radius: 500px;
    display: inline-block;
    background-color: rgba(140,122,230,1);
    height: 100%;
    width: 100%;
    position: absolute;
}

<div class="but-container">
  <button>GO</button>
  <div class="but-shadow"></div>
</div>

正如您在这里所看到的，您必须使用一个外部容器，其中包含充当阴影的<button>和。<div>由于这些元素的宽度和高度是相对于父级的百分比值，因此您可以调整外部<div>容器的大小，因为您希望内部元素始终与外部元素的大小完全相同<div>。所以它也可以与响应式设计一起使用。