기초) box-shadow 정리

 

 

 

 

{ box-shadow : ;}

 

 

박스 내 / 외부에 그림자 효과를

넣을 수 있는 기능으로

값을 넣을 때,

 

 

: 5px 5px 10px red;

 

 

식으로 넣으며 순서대로

x축/ y 축/ 번짐 정도 /색상

을 뜻한다.

 

 

 

 

div {width:300px; height: 200px; border: 1px solid red; 
box-shadow: 5px 5px 10px red;

 

 

 

---

 

 

* 박스 내부에 그림자를 넣고 싶을 땐

값 초반에inset이라는값을 넣으면 된다.

 

div {width:300px; height: 200px; border: 1px solid red; 
box-shadow: inset -5px -5px 10px red;