Apprenez à obtenir un effet de dégradé en modifiant les bords d'un bloc avec CSS

Question

Comment modifier mon CSS pour avoir un effet de flou progressif sur les bords de la boîte ? J'aimerais que l'arrière-plan de la boîte ait un effet de verre dépoli et, au lieu de bords nets autour, un effet de plumes qui se fond progressivement dans l'arrière-plan, mais je ne sais pas comment modifier le CSS actuel. J'espère avoir votre aide, merci.

.wrap {
  position : relative ;
  largeur : 100 % ;
  hauteur : 100vh ;
  image d'arrière-plan : url ('https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=16 25 &q= 80');
  taille de l'arrière-plan : couverture ;
  .boîte {
    position : absolue ;
    gauche : 50 % ;
    haut : 50 % ;
    transformer : traduire (-50 %, -50 %);
    largeur : 200 px ;
    hauteur : 200px ;
    couleur de fond : rouge ;
    rayon de bordure : 50 % ;
    couleur d'arrière-plan : rgba (225, 225, 225, 10 % );
    filtre de toile de fond : flou (2 px );
  }
}</pré>
<pre class="brush:html;toolbar:false;"><div class="wrap">
  <div class="box"></div>
</div>

Answer 1

Tout ce que je comprends, c'est simplement d'ajouter n'importe quel extrait de code ci-dessous :

box-shadow : inset 2px 2px 15px #fff; // ou box-shadow : encart 2px 2px 15px rgba(255,255,255,.5)