border-shadow
border-shaodw: none | h-shadow | v-shadow | blur | spread | color | inset
| 종류 | 예시 |
|---|---|
| none | 그림자 효과를 적용하지 않습니다. |
| h-shadow | 그림자 수평(x축) 거리를 나타냅니다. |
| v-shadow | 그림자 수평(y축) 거리를 나타냅니다. |
| blur | 그림자의 흐림정도를 나타냅니다. |
| inset | 그림자 내부에 적용할 수 있습니다. |
sample01
border-shadow
shadow01
shadow02
shadow03
shadow04
shadow05
shadow06
shadow07
shadow08
shadow09
shadow10
.shadow01 {box-shadow: 0px 0px 0px 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);}
sample02
border-shadow
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);}
sample03
border-shadow
shadow21
shadow22
shadow23
shadow24
shadow25
shadow26
shadow27
shadow28
shadow29
shadow30
.shadow21 {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.8);}
.shadow22 {box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.8);}
.shadow23 {box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 0.8);}
.shadow24 {box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.8);}
.shadow25 {box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.8);}
.shadow26 {box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.8);}
.shadow27 {box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.8);}
.shadow28 {box-shadow: 0px 0px 0px 14px rgba(0, 0, 0, 0.8);}
.shadow29 {box-shadow: 0px 0px 0px 16px rgba(0, 0, 0, 0.8);}
.shadow30 {box-shadow: 0px 0px 0px 18px rgba(0, 0, 0, 0.8);}
sample04
border-shadow
shadow31
shadow32
shadow33
shadow34
shadow35
shadow36
shadow37
shadow38
shadow39
shadow40
.shadow31 {box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.8);}
.shadow32 {box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.8);}
.shadow33 {box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, 0.8);}
.shadow34 {box-shadow: 0px 0px 9px 6px rgba(0, 0, 0, 0.8);}
.shadow35 {box-shadow: 0px 0px 12px 8px rgba(0, 0, 0, 0.8);}
.shadow36 {box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.8);}
.shadow37 {box-shadow: 0px 0px 18px 12px rgba(0, 0, 0, 0.8);}
.shadow38 {box-shadow: 0px 0px 21px 14px rgba(0, 0, 0, 0.8);}
.shadow39 {box-shadow: 0px 0px 24px 16px rgba(0, 0, 0, 0.8);}
.shadow40 {box-shadow: 0px 0px 27px 18px rgba(0, 0, 0, 0.8);}
sample05
border-shadow
shadow41
shadow42
shadow43
shadow44
shadow45
shadow46
shadow47
shadow48
shadow49
shadow50
.shadow41 {box-shadow: 0px 0px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow42 {box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow43 {box-shadow: 0px 4px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow44 {box-shadow: 0px 6px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow45 {box-shadow: 0px 8px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow46 {box-shadow: 0px 10px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow47 {box-shadow: 0px 12px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow48 {box-shadow: 0px 14px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow49 {box-shadow: 0px 16px 5px -3px rgba(0, 0, 0, 0.8);}
.shadow50 {box-shadow: 0px 18px 5px -3px rgba(0, 0, 0, 0.8);}
sample06
border-shadow
shadow51
shadow52
shadow53
shadow54
shadow55
shadow56
shadow57
shadow58
shadow59
shadow60
.shadow51 {box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.8) inset;}
.shadow52 {box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.8) inset;}
.shadow53 {box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.8) inset;}
.shadow54 {box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.8) inset;}
.shadow55 {box-shadow: 0px 0px 9px 5px rgba(0, 0, 0, 0.8) inset;}
.shadow56 {box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.8) inset;}
.shadow57 {box-shadow: 0px 0px 11px 7px rgba(0, 0, 0, 0.8) inset;}
.shadow58 {box-shadow: 0px 0px 12px 8px rgba(0, 0, 0, 0.8) inset;}
.shadow59 {box-shadow: 0px 0px 13px 9px rgba(0, 0, 0, 0.8) inset;}
.shadow60 {box-shadow: 0px 0px 14px 10px rgba(0, 0, 0, 0.8) inset;}
sample07
border-shadow
shadow61
shadow62
shadow63
shadow64
shadow65
shadow66
shadow67
shadow68
shadow69
shadow70
.shadow61 {box-shadow: 5px 5px 0px 0px #00695c;}
.shadow62 {box-shadow: 5px 5px 0px 0px #00695c, 10px 10px 0px 0px #00796b;}
.shadow63 {box-shadow: 5px 5px 0px 0px #00695c, 10px 10px 0px 0px #00796b, 15px 15px 0px 0px #00897b;}
.shadow64 {box-shadow: 5px 5px 0px 0px #00695c, 10px 10px 0px 0px #00796b, 15px 15px 0px 0px #00897b, 20px 20px 0px 0px #009688;}
.shadow65 {box-shadow: 5px 5px 0px 0px #00695c, 10px 10px 0px 0px #00796b, 15px 15px 0px 0px #00897b, 20px 20px 0px 0px #009688, 25px 25px 0px 0px #26a69a;}
.shadow66 {box-shadow: 0px 0px 0px 5px #00695c inset;}
.shadow67 {box-shadow: 0px 0px 0px 5px #00695c inset, 0px 0px 0px 10px #00796b inset;}
.shadow68 {box-shadow: 0px 0px 0px 5px #00695c inset, 0px 0px 0px 10px #00796b inset, 0px 0px 0px 15px #00897b inset;}
.shadow69 {box-shadow: 0px 0px 0px 5px #00695c inset, 0px 0px 0px 10px #00796b inset, 0px 0px 0px 15px #00897b inset, 0px 0px 0px 20px #009688 inset;}
.shadow70 {box-shadow: 0px 0px 0px 5px #00695c inset, 0px 0px 0px 10px #00796b inset, 0px 0px 0px 15px #00897b inset, 0px 0px 0px 20px #009688 inset, 0px 0px 0px 25px #26a69a inset;}
sample08
See the Pen CSS3 - Box - shadow1 by heemwon (@heemwon) on CodePen.