css : box-shadow

inset : 안쪽 그림자 ( 밑에서 첫번째 그림 )

 

offset -x 는 수평그림자 값으로  + 면 왼쪽에서 오른쪽으로 - 면 오른쪽에서 왼쪽으로 간다.

offset -y 는 수직 그림자 값으로 + 면 위에서 아래로 - 면 아래에서 위로 간다.

 

blur는 가장자리를 부드럽게 or 기본값 ( 0) 으로 할거냐

color 는 그림자의 색상을 지정을 할 수 있다.

---

공식
boxshadow : (x축값) , (y축값 ) , (번짐정도) ,컬러

 

 

 

 

 

div {
  width:250px;
  height: 200px;
  background-color: #ccc;
  margin:10px;
  border-radius: 10px;
  float: left;
 
}

.box1 {
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.601);
}
.box2 {
  box-shadow: 0 0 20px rgba(0, 0, 255, 0.582);
}

.box3{
  box-shadow: 10px 10px 0 crimson;
}

.box4{
  box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.382);
}

.box5{
  box-shadow: inset 0px 0px 20px rgba(253, 253, 253, 0.645);
}

.box6{
  box-shadow: inset 0px 0px 100px rgba(15, 12, 12, 0.645);;
}