Только центр радиальной прозрачности CSS

Question

Я создал div с текстом внутри. Я пытаюсь создать функцию наведения, которая заставит квадратный div иметь полупрозрачные края.

Я пытаюсь сделать это с помощью Radial Gradient. Но если я попытаюсь использовать прозрачность, это заставит весь Радиальный Градиент также стать прозрачным.

Есть ли способ, которым я мог бы "удалить" средний цвет, чтобы текст был виден посередине и имел прозрачность по белым краям?

Я спрашивал вокруг и слышал, что есть способ "переопределить" это. Не уверен, что это возможно.

Я знаю, что фотошоп будет хорошей альтернативой. Но я хотел бы посмотреть, есть ли способ добиться такого эффекта с помощью чисто CSS. Или есть какой-нибудь лучший способ сделать коробку с прозрачными краями, что-то более практичное, чем Radial Gradient, который мне не хватает?

Answer 1

Что-то вроде этого

.test {
  background-image: radial-gradient(ellipse, white, transparent 70%);
  color: red;
  font-size: 70px;
  display: inline-block;
  border: solid 1px black;
  }
  

body {
  background-color: lightgreen;
 }

<div class="test">TEST</div>

Answer 2

Благодаря vals я понял это. Это ответ, если кому-то интересно.

1: вы можете установить 2 цвета. Внутренний цвет должен быть таким же, как фон. Внешний цвет белый.

2: внутренний цвет может быть любым, а внешний - белым. Каждый цвет может быть сделан прозрачным индивидуально. rgba (26,26,26,0) 70%, rgba (250, 250,250,0,6)

Первый цвет будет полностью прозрачным, поэтому фон будет видимым, а белый - полупрозрачным, что придает краям "блестящий" вид. 70% сообщат CSS, где закончится первый цвет (30% от границ и краев)

Я надеюсь, что это поможет некоторым начинающим разработчикам:)