divの境界をぼかすことはできますか？ CSS

Question

私のボックスの色を中間で非常に不透明にし、境界に近づくにつれて消えるようにします。

Answer 1

この目的でbox-shadowを使用できます。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b

body { 
 
display: flex; 
 
align-items: center; 
 
justify-content: center; 
 
height: 100vh; 
 
} 
 

 
div { 
 
    width: 25vw; 
 
    height: 25vw; 
 
    background: royalblue; 
 
    box-shadow: 0 0 10px navy; 
 
}

<div></div>

更新：

あなたが探していたものの絵を見た後、私はより良いものと一致することを試みました。まだbox-shadowである。

body { 
 
display: flex; 
 
align-items: center; 
 
justify-content: center; 
 
height: 100vh; 
 
} 
 

 
div { 
 
    width: 25vw; 
 
    height: 25vw; 
 
    background: #999999; 
 
    box-shadow: inset 0 0 10vw 2.5vw white; 
 
}

<div></div>