Css，我想模糊边框而不模糊div的内容

Question

Html代码

<div style="display: inline" class="button">    <a href="indeks.html">Home</a> </div>  

Css代码

.button {
border : 2px solid white ;
-webkit-filter: blur(3px);}

问题是我想模糊边框而不模糊href中的文本。 我尝试在网上找到它，但没有类似的东西（人们可能会问如何模糊图像的一部分）。 我也尝试使用z-index进行操作，但它没有产生任何影响（为没有blurr的hrref添加了另一个类，并将其放在上面，但似乎继承了该属性）。

我只是出于想法。

Answer 1

模糊的边界...... 好吧，我会选择box-shadow而不是CSS filter effects：

box-shadow: 0 0 8px 1px gray, inset 0 0 8px gray;

以下是演示：

.button {
  display: inline-block; padding: .4em;
  box-shadow: 0 0 8px 1px gray, inset 0 0 8px gray;
}

<div class="button">
  <a href="indeks.html">Home</a>
</div>