[CSS] DIV 그림자 주는 법(box-shadow)

box-shadow

 

offset-x

그림자의 수평위치(x)를 설정합니다. 요소로부터 떨어진 거리를 나타낸다.

 

offset-y 

그림자의 수직위치(y)를 설정합니다. 요소로부터 떨어진 거리를 나타낸다.

 

blur-radius

그림자 테두리에 흐려지는 효과를 부여합니다. 클수록 테두리가 흐려진다.

 

spread-radius

그림자의 크기를 설정합니다. 클수록 그림자의 크기가 커진다.

 

color

그림자의 색상을 설정합니다. chrome 기준으로 기본값은 black.

 

 

---

 

2개 인자를 전달하는 경우 : offset-x offset-y (color)

.phone-screen {
    background-color: white;
    height: 600px;
    width: 300px;
    margin: 50px;
    border: 2px rgba(0, 0, 0, 0.2) solid;
    border-radius: 50px;
    
    /* 그림자 부분 */
    box-shadow: 20px 20px gray;
}

 

 

 

오른쪽(x) 아래(y)로 20px씩 움직였다.

 

 

---

 

3개 인자를 전달하는 경우 - offset-x offset-y blur-radius (color)

.phone-screen {
    background-color: white;
    height: 600px;
    width: 300px;
    margin: 50px;
    border: 2px rgba(0, 0, 0, 0.2) solid;
    border-radius: 50px;
    
    /* 그림자 부분 */
    box-shadow: 20px 20px 20px gray;
}

 

 

 

blur-radius로 인해 테두리가 흐려진다.

 

 

---

 

4개 인자를 전달하는 경우 - offset-x offset-y blur-radius spread-radius (color)

.phone-screen {
    background-color: white;
    height: 600px;
    width: 300px;
    margin: 50px;
    border: 2px rgba(0, 0, 0, 0.2) solid;
    border-radius: 50px;

    /* 그림자 부분 */
    box-shadow: 20px 20px 20px 20px gray;
}

 

 

 

spread-radius로 인해 그림자가 확산된다.

 

 

References

---

codingbroker.tistory.com/65