Zeichnen eines runden Schattens auf einem quadratischen Element mit CSS

Question

Ist es möglich, einen runden Schatten (ein sauberer Kreis mit dem Spread-Wert auf Null gesetzt) ​​unter einem quadratischen Element? Zum Beispiel ein DIV ohne abgerundete Ränder.

Ich habe folgendes Element, das ich nicht weiter Markup hinzufügen:

<div class="square"></div> 

Darüber hinaus habe ich nicht :before:after und Pseudoelemente verwenden kann, wie sie bereits gestylt ist. Deshalb versuche ich den Box-Schatten anzupassen.

verbinde ich ein Beispiel dessen, was Ich mag würde zu erreichen, nur optisch besser zu erklären:

https://jsfiddle.net/landzup/L275p85L/

Ich benutzte das :before Pseudoelement nur das Ergebnis zu zeigen.

Answer 1

Es gibt ein paar Möglichkeiten, um darüber zu gehen. Ich würde einfach das quadratische Div in ein größeres Container-Div setzen, dann style es nach Belieben. Ich habe ein paar Beispiele für dich aufgenommen.

Ich hoffe, das hilft! - James.

.square { 
 
    width: 20px; 
 
    height: 20px; 
 
    display: block; 
 
    position: relative; 
 
    background: #fff; 
 
    opacity: 1; 
 
    margin: 5px 0 0 5px; 
 
} 
 

 
.circle,.circle-with-spread { 
 
    display: block; 
 
    background-color: #000; 
 
    opacity: 0.3; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 15px; 
 
    position: absolute; 
 
} 
 

 
.circle-with-spread { 
 
    box-shadow: 0 0 5px 5px rgba(0,0,0,1); 
 
}

<!-- Example Circle Shadow --> 
 
<div class="circle"> 
 
    <div class="square"></div> 
 
</div> 
 
<!-- Spacing makes it look nice --> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<!-- Second Example --> 
 
<div class="circle-with-spread"> 
 
    <div class="square"></div> 
 
</div>