模糊矩形div边缘？

Question

有没有一种方法可以模糊矩形div？如下图所示，在“ X”字母所在的位置应将其模糊成白色。这在CSS中可行吗？

Answer 1

如果您的“ x”字母未在背景中固定，则您将使CSS中的“ x”字母模糊。首先调用您的“ x”字母，然后在css { filter：blur（10px）; }中越过这一行。

Answer 2

我可能不会在div元素上使用filter：blur（），因为它可能会模糊div元素内部内容的内容。

假设“ X”字母只是希望出现白色模糊的标记，我建议采用盒影法。

.blur {
  background: purple;
  text-align: center;
  padding:10px;
  height: 100px;
  width: 200px;
  filter: blur(2px);

}
.boxShadow {
  background: purple;
  text-align: center;
  padding:10px;
  height: 100px;
  width: 200px;
  box-shadow:  inset 0 0 8px 10px white;

}

<div class="blur">
  <p><font color="white">Blur</font></p>
</div>

<div class="boxShadow">
  <p><font color="white"> Box-shadow </font></p>
</div>