티스토리 뷰

CSS

[CSS] box-shadow

box-shadow

box-shadow 속성은 박스 요소의 그림자를 설정합니다.


box-shadow

box-shadow 속성은 박스 요소의 그림자를 설정합니다.

정의(Definition)

  • box-shadow 속성은 박스 요소의 그림자를 설정합니다.

문법(Syntax)

box-shadow : none | h-shadow | v-shadow | blur | spread | color | inset

/* 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) 더보기

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

Sample : shadow

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: 18px 18px 5px rgba(0,0,0,0.8);}

Sample : blur

shadow11
shadow12
shadow13
shadow14
shadow15
shadow16
shadow17
shadow18
shadow19
shadow20
.shadow11 {box-shadow: 4px 4px 0 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);}

Sample : spread

shadow21
shadow22
shadow23
shadow24
shadow25
shadow26
shadow27
shadow28
shadow29
shadow30
.shadow21 {box-shadow: 5px 5px 0px 5px rgba(0,0,0,0.8);}
.shadow22 {box-shadow: 8px 8px 0px 5px rgba(0,0,0,0.8);}
.shadow23 {box-shadow: 11px 11px 0px 5px rgba(0,0,0,0.8);}
.shadow24 {box-shadow: 14px 14px 0px 5px rgba(0,0,0,0.8);}
.shadow25 {box-shadow: 17px 17px 0px 5px rgba(0,0,0,0.8);}
.shadow26 {box-shadow: -5px -5px 0px 5px rgba(0,0,0,0.8);}
.shadow27 {box-shadow: -8px -8px 0px 5px rgba(0,0,0,0.8);}
.shadow28 {box-shadow: -11px -11px 0px 5px rgba(0,0,0,0.8);}
.shadow29 {box-shadow: -14px -14px 0px 5px rgba(0,0,0,0.8);}
.shadow30 {box-shadow: -17px -17px 0px 5px rgba(0,0,0,0.8);}

Sample

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);}

Sample

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)}

Sample

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)}

Sample

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}

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼