CSS BoxShadow 제대로 알기

box-shadow 값 요소들

box-shadow는 2개~4개의 length값과 옵션으로 color값과 inset값으로 구성됩니다. 각 값들의 순서는 아무렇게 입력해도 상관없지만 length값들은 꼭 연속해서 입력되야하며 2개이상의 값이 필요합니다.

// 올바른 입력
box-shadow: red inset 3px 3px 1em .2em;
box-shadow: red 3px 3px 1em .2em;
box-shadow: red 3px 3px 1em .2em inset;
box-shadow: 3px 3px 1em red;

// 틀린 입력
box-shadow: 3px 3px red 1em;
box-shadow: 3px red;

color는 그림자 색상, inset은 그림자 반전 여부 그리고, length값들은 그림자의 위치를 나타냅니다,

length값들의 역할

그림자 위치

length값은 입력 순서대로 가장 앞선 2개의 값이 각각 offset-x, offset-y가 되며 그뒤 순서대로 blur-radius, spread-radius가 됩니다.

기본적으로 입력되어야 하는 offset-x와 offset-y는 그림자의 위치를 나타냅니다. 똑같은 크기의 그림자가 요소 뒤에 존재(offset-x=0, offset-y=0)한다고 보고 이 그림자를 좌우측(offset-x) 또는 상하(offset-y)로 이동시킨다고 생각하시면 됩니다.

box-shadow: 0 0 red;

box-shadow: 1px 1px red;

box-shadow: -1px -1px red;

box-shadow: -3px 10px red;

그림자 번짐

세번째 length값은 그림자의 번짐 정도를 나타냅니다. 해당 값이 커질수록 그림자의 영역이 번짐효과와 함께 넓어집니다.

box-shadow: -3px 10px red; (blur값 없음)

box-shadow: -3px 10px 10px red; (blur값 존재)

그림자 범위

네번째 length값은 그림자의 크기를 나타냅니다. 기본값으로는 0으로 그림자의 크기가 요소의 크기와 동일하지만, 해당 값이 커지면 그림자의 크기가 상하좌우로 커지고, 반대로 값이 작아지면 그림자의 크기가 작아집니다.

box-shadow: 0 0 0 5px red;

box-shadow: 0 30px 0 -15px red;

color

그림자 색상의 경우 CSS의 기본 색상 표현식(rgba, hex 등)으로 색을 지정할 수 있습니다.

inset

기본적으로 그림자는 요소의 뒤편 그리고 바깥영역을 차지하지만, inset을 사용하면 그림자를 요소 안의 영역을 차지하도록 할 수 있습니다.

inset의 사용여부와는 상관없이 length값들은 동일하게 동작합니다. 다만 번짐효과나 그림자의 범위조절의 경우 inset의 사용여부에 따라 느낌이 좀 다른데요. 해당 값이 커질수록 inset을 사용하지 않으면 마치 요소 바깥방향으로 뻗어나가는 형태이고, inset을 사용하게되면 요소 안쪽방향으로 뻗어나는 형태를 나타내게 됩니다.

box-shadow: 0 0 20px 0 red;

box-shadow: 0 0 20px 0 red inset;

두 샘플이미지를 보면 inset설정이 없으면 번짐효과나 범위는 값이 커질수록 요소 바깥 방향으로 뻗어나가지만, inset설정이 있는경우 번짐효과나 범위는 값이 커질수록 요소 안쪽 방향으로 뻗어나가는것을 볼 수 있습니다.

Multiple box-shadow

그리고 box-shadow에서는 콤마(,)를 사용하여 그림자를 여러개 동시에 설정할 수 있습니다.

box-shadow:
    inset 0 -3em 3em rgba(0, 0, 200, 0.3),
    0 0 0 2px white,
    -0.3em -0.3em 1em rgba(0, 200, 0, 0.6),
    0.3em 0.3em 2em rgba(200, 0, 0, 0.6);

그림자의 순서는 먼저 생성되는 그림자가 제일 위로 오고 나중에 생성될수록 점점 더 뒤로 갑니다.

box-shadow:
    0 0 0 1em rgba(0, 200, 0),
    0 0 0 3em rgba(200, 0, 0);