白框阴影周围奇怪的黑暗光环

Question

我在一个完全位于父div角落的按钮周围放了一个白色的盒子阴影，这样当它靠近按钮时，它周围的内容会逐渐消失，但是周围有一个奇怪的黑色光环。阴影。导致这种情况的原因是什么？我怎样才能摆脱它？

这是代码摘录。我使用手写笔作为我的预处理器和笔尖。

.card-link {
    position: absolute;
    bottom: $card-padding.medium;
    right: $card-padding.medium;
    text-transform: lowercase;
    text-decoration: underline;
    background-color: white;
    box-shadow: 0px 0px 20px 20px white;
}

<div class="c-card">
    <div class="c-card-container">
        <div class="face front " style="background-image: url({{ file_url(paragraph.field_card_image.entity.uri.value) }})">
            <span class="card-image icon-{{paragraph.field_card_image_is_icon.value}}">
            {% if paragraph.field_card_image is empty %}
                <div class="card-title">{{paragraph.field_card_title.value}}</div>
                <div class="card-content">{{content.field_card_text}}</div>
                <div class="card-link">{{content.field_card_link}}</div>
            {% endif %}
            </span>
        </div>
        <div class="face back">
        {% if paragraph.field_card_image is not empty %}

            <div class="card-title">
            {% if paragraph.field_card_title is not empty %}
                {{paragraph.field_card_title.value}}
            {% endif %}
            </div>
            <div class="card-content">{{content.field_card_text}}</div>
            <div class="card-link">{{content.field_card_link}}</div>
        {% endif %}
        </div>
    </div>
</div>

修改

以隐身方式查看页面似乎删除了光环，这表明来自CMS（Drupal）的管理栏有一些影响box-shadow渲染的CSS。由于我的盒子阴影具有最高优先级，所以没有其他盒子阴影可以覆盖样式。