[HTML/CSS] 박스(BOX)에 그림자 적용하기 box-shadow

박스 주위에 그림자 적용시에 box-shadow 속성을 사용합니다. 입체적으로 보이는 모양이 보기에도 좋아보입니다.

box-shadow 속성
아래와 같이, box-shadow 속성은 4 개의 숫자와 색상 값을 지정합니다. .shadow { 　　-moz-box-shadow: 3px 3px 3px 3px #999; 　　-webkit-box-shadow: 3px 3px 3px 3px #999; 　　box-shadow: 3px 3px 3px 3px #999; 　　}
첫 번째 값	수평 방향의 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 생깁니다.
두 번째 값	수직 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 박스 아래에, 음수 값을 지정하면 박스 위에 그림자가 붙습니다.
세 번째 값	그림자의 흐림 반경(blur radius)을 나타냅니다. 음수 값을 지정할 수는 없습니다. 값이 클수록 그림자의 끝이 흐려지고, 값이 "0"이면 그림자 끝이 흐려지지 않고 선명한 그림자가 됩니다.
네 번째 값	그림자의 확산 거리(Spread distance)를 나타냅니다. 양수 값을 지정하면 그림자의 전방위로 확대되고, 음수 값을 지정하면 그림자의 크기가 줄어 듭니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 붙습니다.
다섯 번째 값	그림자의 색상 (color)을 지정합니다.

스폰서 링크

▼　아래와 같이 3개의 도형에 각각 그림자를 붙여 보았습니다. first 박스에 양수 값을 주어 그림자를 붙였습니다.

second 박스에는 음수 값, third 박스에는 그림자의 확산 정도를 값 -1로 확인해 보았습니다.

그림자 붙이는 방법

.shadowbox {   width:100px;   height:100px; }   .first{   border-radius:3px;   box-shadow:3px 3px 3px 3px #999;}     .second{   border-radius:50%;   box-shadow:-3px -3px 3px 6px #093;}   .third{   border-radius:3px;   transform-origin:50% 50%;   transform:rotate(20deg);   box-shadow:3px 3px 0px -1px #F00;}

first

second

third

상자의 내부에 그림자 적용하기：inset

그림자의 흐림 정도를 적정하게 사용하면 그라데이션 효과를 낼 수 있습니다.

.inset-box { 　　width:100px; 　　height: 100px; 　　border-radius:50%; 　　border:1px solid #999; 　　background:#FFF; 　　box-shadow:inset 0 2px 45px #7c7c7e; }

inset

픽셀을 겹쳐 쌓아 그림자 만들기

수평 방향의 값을 "0"으로 해 두고, 수직 방향으로 1 픽셀씩 증가시키먄사, 연한 색에서 점차 짙은 색으로 값을 지정합니다. 결과, 아래와 같이 입체적인 박스가 완성되었습니다.

.shadowbox {   0 1px 1px #c0c0c0,   0 2px 0 #a8a7a6,   0 3px 0 #8b8a89,   0 4px 0 #7d7b7a,   0 5px 0 #686766,   0 6px 3px #5f5e5d;   }

픽셀을 겹쳐 쌓아 그림자 만들기

박스 외부와 내부의 그림자 맞추기

여러 값을 쉼표(,)로 구분하면서 지정합니다. 결과, 박스의 내부와 외부 모두에 그림자가 붙은 모습이 완성됐습니다.

.inset-shadowbox {   0 1px 1px #c0c0c0,   0 2px 0 #a8a7a6,   0 3px 0 #8b8a89,   0 4px 0 #7d7b7a,   0 5px 0 #686766,   0 6px 3px #5f5e5d,   inset 1px 1px 50px #7c7c7e;   }

겹쳐 쌓아 그림자 만들기

출처 : https://www.tabmode.com/homepage/box-shadow.html