CSS로 사각형 요소에 둥근 그림자 그리기

Question

둥근 그림자 (확산 값이 0 인 청초한 원)를 사각형 요소 아래에 만들 수 있습니까? 예. 둥근 테두리가없는 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>