[CSS] box-shadow

 

box-shadow

 

 

div에 그림자를 넣고싶을 때 사용하는 css

 

.box {
    box-shadow: 0px 5px 10px 5px #454545;
}

 

옵션을 5가지 넣어줄 수 있는데, 각각을 순서대로 1 2 3 4 5라고 하면

 

1 : 그림자가 오른쪽으로 얼마나 이동할 것인지 (- 값을 넣으면 왼쪽으로 이동한다)

2 : 그림자가 아래쪽으로 얼마나 이동할 것인지 (- 값을 넣으면 위쪽으로 이동한다)

3 : 그림자의 부드러운 정도

4 : 그림자의 확장량

5 : 그림자의 색상을 넣어줄 수있다.

 

 

 

 

inset 옵션을 넣으면 박스 내부에 그림자를 만들어줄 수 있다

 

.box {
    box-shadow: inset 5px 5px 10px 5px #454545;
}

 

 

 

 

 

 

 

명확하게 보이라고 3번째 옵션인 그림자 부드럽게 보이기를 0으로 설정했다

 

inset 0px -10px 0px 4px rgba(24, 16, 2, 0.1);

inset을 추가  : inset -10px -10px 0px 4px rgba(24, 16, 2, 0.1);

-10px -10px 0px 4px rgba(24, 16, 2, 0.1)