Wie mache ich CSS-Schattenwurf mit Offset um die Seiten

Question

Ich möchte einen Dropshadow, der keine Unschärfe hat und hat einen leichten Versatz an den Seiten und ist auch abgerundete Ecken. Genau wie das Bild unten

Jeder alternativer Ansatz neben Dropshadows könnte auch als gut arbeitet

Answer 1

diese hinzufügen, um die CSS-Element-:

-webkit-box-shadow: 0px 0px 53px 10px rgba(236,245,159,1); 
-moz-box-shadow: 0px 0px 53px 10px rgba(236,245,159,1); 
box-shadow: 0px 0px 53px 10px rgba(236,245,159,1); 

Beispiel:

#box { 
 
    margin:40px; 
 
    height:100px; 
 
    width:100px; 
 
    border-radius:20px; 
 
    background-color:#E8ED8A; 
 
    -webkit-box-shadow: 0px 0px 53px 10px rgba(236,245,159,1); 
 
    -moz-box-shadow: 0px 0px 53px 10px rgba(236,245,159,1); 
 
    box-shadow: 0px 0px 53px 10px rgba(236,245,159,1); 
 
}

<div id='box'></div>

Answer 2

.box{ 
 
width:80px; 
 
height:80px; 
 
background-color:red; 
 
border-radius:10px; 
 
border: 1px offset red; 
 
box-shadow:5px 5px 0px black; 
 
}

<div class="box"> 
 
</div>