Размыть прямоугольные края div?

Question

Есть ли способ размывания прямоугольного элемента div? Как вы можете видеть на изображении ниже, оно должно быть размыто до белого цвета, где буквы «Х». Возможно ли это в CSS?

Answer 1

Я не могу использовать filter: blur () для вашего элемента div, так как он может размывать содержимое всего, что находится внутри вашего элемента 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>

Answer 2

Если ваши буквы "x" не зафиксированы на фоне, тогда вы пометите буквы "x" в css. Сначала назовите ваши буквы «x» и пройдите эту строку в вашем фильтре css {: blur (10px); }.