-webkit-filter: blur() 不起作用 vue js答案

【问题标题】：-webkit-filter: blur() doesn't work vue js-webkit-filter: blur() 不起作用 vue js
【发布时间】：2021-06-16 08:30:45
【问题描述】：

我正在尝试添加-webkit-filter: blur()，但它根本不起作用。我刚刚尝试了“过滤器”，但它无论如何都不起作用。我认为它适用于 html，而不是 Vue，或者有其他选择吗？

<template>
  <div class="comingsoon">
    <span class="circle"></span>
    <span class="msg">COMING SOON</span>
    <span class="notifymsg">GET NOTIFIED WHEN IT'S READY</span>
    <span class="field"></span>
  </div>
</template>

CSS

.circle {
    height: 400px;
    width: 400px;
    border-radius: 50%;
    background: linear-gradient(#313247 0%, #19181D 30%);
    position: absolute;
    top: 20%;
    left: 35%;
}

.circle:before,
.circle:after {
    content: '';
    height: 400px;
    width: 400px;
    background: linear-gradient(#FFD1DA 0%, #FF849D 5%, 2D2133 25%);
    border-radius: 50%;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-filter: blur(7px);
    z-index: -1;
}

.circle:after {
    width: 415px;
    top:35%;
    -webkit-filter: blur(14px);
    opacity: .3;
}

【问题讨论】：

标签： javascript css vue.js filter webkit

【解决方案1】：

简单添加这一行就可以了！

span.circle {
    -webkit-filter: blur(14px);
}

【讨论】：