CSSで正方形要素に丸みのある影を描く

Question

丸の影（広がり値がゼロに設定されたきれいな円）を正方形要素の下に作成できますか？ など。丸みのある境界のないDIV。彼らは既にスタイルされる

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

はまた、私は、:beforeと:after擬似要素を使用することはできません。

私は私はさらに、マークアップを追加することはできません次の要素を有します。だからこそ私はボックスシャドーを適応しようとしています。

私はちょうど良く、視覚的に説明して、達成したいものの例をリンク：

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

私は結果だけを表示するように:before擬似要素を使用していました。

Answer 1

これについては、いくつかの方法があります。私は単により大きなコンテナのdivに四角形のdivを入れて、それをあなたが望むようにスタイルするだけです。私はあなたのためにいくつかの例を挙げました。

こちらがお役に立てば幸いです。 - ジェームス。

.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>