Только радиальный прозрачный центр 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

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

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

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

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

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