[html/css] box-shadow로 그림자 넣기.

[html/css] box-shadow로 그림자 넣기.

흰색 사각형

여기에 200px*300px의 흰색 사각형이 있습니다. 흰색이라서 보이지 않아요.

사각형의 대한 코드.

<div style="width:200px; height:300px;background-color:#fff; border-radius:4px;">
 <p style="color:#000">This is box-shadow</p>
</div>

이런식으로 넣어주시면 됩니다.

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

<inset>

일반 그림자가 아닌 요소의 안으로 생기는 그림자. 지정하지 않으면 일반적으로 요소 뒤로 요소가 떠 있도록 보이게 하는 그림자로 설정합니다.

 

box-shadow inset

<offset-x> <offset-y>

그림자가 생기는 좌표입니다. 값이 커질수록 x는 왼쪽에서 오른쪽으로 y는 아래에서 위로 그림자가 생깁니다.

offset-x/y에 따라 달라지는 그림자

x,y값이 커지면 그림자도 요소랑 점점 멀어진 곳에서 위치하게됩니다.

 

 

<blur-radius>

그림자의 흐린 정도를 나타냅니다. 값이 커지면 그림자의 범위가 커지고 색이 흐려집니다.

blur-radius

<spread-radius>

그림자의 크기가 커집니다. 0이면 원래 요소랑 그림자 크기가 똑같고, 값이 커지면 요소보다 그림자가 커집니다.

spread-radius

<color>

그림자의 컬러를 지정합니다.

box-shadow color

box-shadow: 2px 1px 10px 1px rgba(0,0,0,0.1);"

box-shadow

그림자를 복수로 지정할 수도 있습니다. 

box-shadow: 2px 1px 10px 1px rgba(0,0,255,0.5), -5px -10px 10px 1px olive;