코드랩 레퍼런스

box-shadow 본문

CSS

box-shadow

webstoryboy 2016. 6. 17. 17:46


box-shadow 속성은 콘텐츠의 그림자를 설정합니다.

Summary

특징 설명
기본 값 none
상속 안됨
애니메이션 가능
버전 CSS3

Definition

  • box-shadow 속성은 콘텐츠의 그림자를 설정합니다.

Syntax

box-shadow : none | h-shadow | v-shadow | blur | spread | color | inset | inherit;
/* h-shadow | v-shadow | color를 설정한 경우 */
box-shadow: 10px 20px #ccc;

/* h-shadow | v-shadow | blur | color를 설정한 경우 */
box-shadow: 10px 20px 10px #ccc;

/* h-shadow | v-shadow | blur | spread | color를 설정한 경우 */
box-shadow: 10px 20px 10px 10px rgba(0, 0, 0, 0.2);

/* inset | h-shadow | v-shadow | blur | spread | color를 설정한 경우 */
box-shadow: inset 10px 20px 10px 10px rgba(0, 0, 0, 0.2);

/* 두 가지 속성을 설정한 경우 */
box-shadow: 10px 20px #ccc;, 10px 10px red;

Property

속성 값 설명
none 박스 그림자를 적용하지 않습니다.
h-shadow 그림자의 수직(X축) 거리를 나타냅니다.
v-shadow 그림자의 수직(Y축) 거리를 나타냅니다.
blur 그림자의 흐림정도를 나타냅니다.
spread 그림자의 거리를 나타냅니다.
color 그림자의 색을 나태냅니다.
inset 그림자를 내부에 적용할 수 있습니다.
inherit 그림자의 속성 값을 상위요소한테 상속받습니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
box-shadow

Sample

box-shadow









Sample1 원형 픽스드 그라디언트입니다.

shadow01
shadow02
shadow03
shadow04
shadow05
shadow06
shadow07
shadow08
shadow09
shadow10
  • .shadow01 {box-shadow: 0px 0px 5px rgba(0,0,0,0.8);}
  • .shadow02 {box-shadow: 2px 2px 5px rgba(0,0,0,0.8);}
  • .shadow03 {box-shadow: 4px 4px 5px rgba(0,0,0,0.8);}
  • .shadow04 {box-shadow: 6px 6px 5px rgba(0,0,0,0.8);}
  • .shadow05 {box-shadow: 8px 8px 5px rgba(0,0,0,0.8);}
  • .shadow06 {box-shadow: 10px 10px 5px rgba(0,0,0,0.8);}
  • .shadow07 {box-shadow: 12px 12px 5px rgba(0,0,0,0.8);}
  • .shadow08 {box-shadow: 14px 14px 5px rgba(0,0,0,0.8);}
  • .shadow09 {box-shadow: 16px 16px 5px rgba(0,0,0,0.8);}
  • .shadow10 {box-shadow: 16px 16px 5px rgba(0,0,0,0.8);}

Sample2 blur값에 따른 그림자 효과입니다.

shadow11
shadow12
shadow13
shadow14
shadow15
shadow16
shadow17
shadow18
shadow19
shadow20
  • .shadow11 {box-shadow: 4px 4px 0px rgba(0,0,0,0.8);}
  • .shadow12 {box-shadow: 4px 4px 3px rgba(0,0,0,0.8);}
  • .shadow13 {box-shadow: 4px 4px 6px rgba(0,0,0,0.8);}
  • .shadow14 {box-shadow: 4px 4px 9px rgba(0,0,0,0.8);}
  • .shadow15 {box-shadow: 4px 4px 12px rgba(0,0,0,0.8);}
  • .shadow16 {box-shadow: 4px 4px 15px rgba(0,0,0,0.8);}
  • .shadow17 {box-shadow: 4px 4px 18px rgba(0,0,0,0.8);}
  • .shadow18 {box-shadow: 4px 4px 21px rgba(0,0,0,0.8);}
  • .shadow19 {box-shadow: 4px 4px 24px rgba(0,0,0,0.8);}
  • .shadow20 {box-shadow: 4px 4px 27px rgba(0,0,0,0.8);}

Sample3 spread 효과를 표현한 애니메이션입니다.

shadow21
shadow22
shadow23
shadow24
shadow25
shadow26
shadow27
shadow28
shadow29
shadow30
  • .shadow21 {box-shadow: 10px 10px 0px 5px rgba(0,0,0,0.8);}
  • .shadow22 {box-shadow: 12px 12px 0px 5px rgba(0,0,0,0.8);}
  • .shadow23 {box-shadow: 14px 14px 0px 5px rgba(0,0,0,0.8);}
  • .shadow24 {box-shadow: 16px 16px 0px 5px rgba(0,0,0,0.8);}
  • .shadow25 {box-shadow: 18px 18px 0px 5px rgba(0,0,0,0.8);}
  • .shadow26 {box-shadow: -10px -10px 0px 5px rgba(0,0,0,0.8);}
  • .shadow27 {box-shadow: -12px -12px 0px 5px rgba(0,0,0,0.8);}
  • .shadow28 {box-shadow: -14px -14px 0px 5px rgba(0,0,0,0.8);}
  • .shadow29 {box-shadow: -16px -16px 0px 5px rgba(0,0,0,0.8);}
  • .shadow30 {box-shadow: -18px -18px 0px 5px rgba(0,0,0,0.8);}

Sample4 spread 효과를 표현한 애니메이션입니다.

shadow31
shadow32
shadow33
shadow34
shadow35
shadow36
shadow37
shadow38
shadow39
shadow40
  • .shadow31 {box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.8);}
  • .shadow32 {box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.8);}
  • .shadow33 {box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.8);}
  • .shadow34 {box-shadow: 0px 0px 0px 7px rgba(0,0,0,0.8);}
  • .shadow35 {box-shadow: 0px 0px 0px 9px rgba(0,0,0,0.8);}
  • .shadow36 {box-shadow: 0px 0px 0px 11px rgba(0,0,0,0.8);}
  • .shadow37 {box-shadow: 0px 0px 0px 13px rgba(0,0,0,0.8);}
  • .shadow38 {box-shadow: 0px 0px 0px 15px rgba(0,0,0,0.8);}
  • .shadow39 {box-shadow: 0px 0px 0px 17px rgba(0,0,0,0.8);}
  • .shadow40 {box-shadow: 0px 0px 0px 19px rgba(0,0,0,0.8);}

Sample5 blur와 spread 효과를 준 그림자 애니메이션입니다.

shadow41
shadow42
shadow43
shadow44
shadow45
shadow46
shadow47
shadow48
shadow49
shadow50
  • .shadow41 {box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.8)}
  • .shadow42 {box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.8)}
  • .shadow43 {box-shadow: 0px 0px 3px 5px rgba(0,0,0,0.8)}
  • .shadow44 {box-shadow: 0px 0px 3px 7px rgba(0,0,0,0.8)}
  • .shadow45 {box-shadow: 0px 0px 3px 9px rgba(0,0,0,0.8)}
  • .shadow46 {box-shadow: 0px 0px 3px 11px rgba(0,0,0,0.8)}
  • .shadow47 {box-shadow: 0px 0px 3px 13px rgba(0,0,0,0.8)}
  • .shadow48 {box-shadow: 0px 0px 3px 15px rgba(0,0,0,0.8)}
  • .shadow49 {box-shadow: 0px 0px 3px 17px rgba(0,0,0,0.8)}
  • .shadow50 {box-shadow: 0px 0px 3px 19px rgba(0,0,0,0.8)}

Sample6 아래 쪽에 그림자 효과를 준 애니메이션입니다.

shadow51
shadow52
shadow53
shadow54
shadow55
shadow56
shadow57
shadow58
shadow59
shadow60
  • .shadow51 {box-shadow: 0px 0px 5px -3px rgba(0,0,0,0.8)}
  • .shadow52 {box-shadow: 0px 2px 5px -3px rgba(0,0,0,0.8)}
  • .shadow53 {box-shadow: 0px 4px 5px -3px rgba(0,0,0,0.8)}
  • .shadow54 {box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.8)}
  • .shadow55 {box-shadow: 0px 8px 5px -3px rgba(0,0,0,0.8)}
  • .shadow56 {box-shadow: 0px 10px 5px -3px rgba(0,0,0,0.8)}
  • .shadow57 {box-shadow: 0px 12px 5px -3px rgba(0,0,0,0.8)}
  • .shadow58 {box-shadow: 0px 14px 5px -3px rgba(0,0,0,0.8)}
  • .shadow59 {box-shadow: 0px 16px 5px -3px rgba(0,0,0,0.8)}
  • .shadow60 {box-shadow: 0px 18px 5px -3px rgba(0,0,0,0.8)}

Sample7 내부에 그림자 효과를 준 애니메이션입니다.

shadow61
shadow62
shadow63
shadow64
shadow65
shadow66
shadow67
shadow68
shadow69
shadow70
  • .shadow61 {box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.8) inset}
  • .shadow62 {box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.8) inset}
  • .shadow63 {box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.8) inset}
  • .shadow64 {box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.8) inset}
  • .shadow65 {box-shadow: 0px 0px 9px 5px rgba(0,0,0,0.8) inset}
  • .shadow66 {box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.8) inset}
  • .shadow67 {box-shadow: 0px 0px 11px 7px rgba(0,0,0,0.8) inset}
  • .shadow68 {box-shadow: 0px 0px 12px 8px rgba(0,0,0,0.8) inset}
  • .shadow69 {box-shadow: 0px 0px 13px 9px rgba(0,0,0,0.8) inset}
  • .shadow70 {box-shadow: 0px 0px 14px 10px rgba(0,0,0,0.8) inset}

Ad

Comments