html - 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 搞砸但它没有效果(为 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>