Box-shadowCSS Reference2019. 6. 28. 12:59
Table of Contents
반응형
box-shadow
box-shadow : [h-shadow] [v-shadow] [blur] [spread] [color] [inset] / none;
| 속성 | 설명 |
|---|---|
| h-shadow | 그림자의 수평(X)축 거리를 나타냅니다. |
| v-shadow | 그림자의 수직(Y)축 거리를 나타냅니다. |
| blur | 그림자의 흐림 정도를 나타냅니다. |
| spread | 그림자의 거리를 나타냅니다. |
| color | 그림자의 색을 나타냅니다. |
| inset | 그림자의 효과를 내부로 나타냅니다. |
box-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); }box-shadow: 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); }box-shadow : spread
shadow21
shadow22
shadow23
shadow24
shadow25
shadow26
shadow27
shadow28
shadow29
shadow30
.shadow21 { box-shadow: 5px 5px 0 5px rgba(0, 0, 0, 0.8); }
.shadow22 { box-shadow: 8px 8px 0 5px rgba(0, 0, 0, 0.8); }
.shadow23 { box-shadow: 11px 11px 0 5px rgba(0, 0, 0, 0.8); }
.shadow24 { box-shadow: 14px 14px 0 5px rgba(0, 0, 0, 0.8); }
.shadow25 { box-shadow: 17px 17px 0 5px rgba(0, 0, 0, 0.8); }
.shadow26 { box-shadow: -5px -5px 0 5px rgba(0, 0, 0, 0.8); }
.shadow27 { box-shadow: -8px -8px 0 5px rgba(0, 0, 0, 0.8); }
.shadow28 { box-shadow: -11px -11px 0 5px rgba(0, 0, 0, 0.8); }
.shadow29 { box-shadow: -14px -14px 0 5px rgba(0, 0, 0, 0.8); }
.shadow30 { box-shadow: -17px -17px 0 5px rgba(0, 0, 0, 0.8); }box-shadow
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 8px 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); }box-shadow
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); }box-shadow
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); }box-shadow : inset
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; }box-shadow
shadow71
shadow72
shadow73
shadow74
shadow75
shadow76
shadow77
shadow78
shadow79
shadow80
.shadow71 {box-shadow: 5px 5px 0px 0px #f06292}
.shadow72 {box-shadow: 5px 5px 0px 0px #f06292, 10px 10px 0px 0px #f48fb1}
.shadow73 {box-shadow: 5px 5px 0px 0px #f06292, 10px 10px 0px 0px #f48fb1, 15px 15px 0px 0px #f8bbd0}
.shadow74 {box-shadow: 5px 5px 0px 0px #f06292, 10px 10px 0px 0px #f48fb1, 15px 15px 0px 0px #f8bbd0, 20px 20px 0px 0px #fce4ec}
.shadow75 {box-shadow: 5px 5px 0px 0px #f06292, 10px 10px 0px 0px #f48fb1, 15px 15px 0px 0px #f8bbd0, 20px 20px 0px 0px #fce4ec, 25px 25px 0px 0px #fceef3}
.shadow76 {box-shadow: 0px 0px 0px 5px #f06292 inset}
.shadow77 {box-shadow: 0px 0px 0px 5px #f06292 inset, 0px 0px 0px 10px #f48fb1 inset}
.shadow78 {box-shadow: 0px 0px 0px 5px #f06292 inset, 0px 0px 0px 10px #f48fb1 inset, 0px 0px 0px 15px #f8bbd0 inset}
.shadow79 {box-shadow: 0px 0px 0px 5px #f06292 inset, 0px 0px 0px 10px #f48fb1 inset, 0px 0px 0px 15px #f8bbd0 inset, 0px 0px 0px 20px #fce4ec inset}
.shadow80 {box-shadow: 0px 0px 0px 5px #f06292 inset, 0px 0px 0px 10px #f48fb1 inset, 0px 0px 0px 15px #f8bbd0 inset, 0px 0px 0px 20px #fce4ec inset, 0px 0px 0px 25px #fceef3 inset}반응형
@HYUNJZZANG :: HyunZzang
HyunZzang의 프로그래밍 공간 / 함께 공부해요!!
도움이 되셨다면 "좋아요❤️" 또는 "구독👍🏻" 부탁드립니다 :)
