css 박스 쉐도우 적용 (box-shadow) / 예시

CSS 박스 쉐도우는 요소 주위에 그림자 효과를 추가하는 데 사용되는 속성입니다.

 

box-shadow 속성은 다음과 같은 형식으로 정의됩니다.

box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

1. horizontal-offset: 그림자의 수평 위치를 지정합니다. 음수 값은 그림자가 요소의 왼쪽에 표시되도록 하고, 양수 값은 오른쪽에 표시되도록 합니다.

 

2. vertical-offset: 그림자의 수직 위치를 지정합니다. 음수 값은 그림자가 요소의 위쪽에 표시되도록 하고, 양수 값은 아래쪽에 표시되도록 합니다.

 

3. blur-radius: 그림자의 흐림 반경을 지정합니다. 값이 클수록 흐림이 강해집니다. 0으로 설정하면 그림자가 흐리지 않습니다.

 

4. spread-radius: 그림자의 확장 반경을 지정합니다. 값이 클수록 그림자가 요소로부터 더 멀리 퍼집니다. 0으로 설정하면 그림자가 요소와 동일한 크기를 가집니다.

 

5. color: 그림자의 색상을 지정합니다. 보통 16진수, RGB, RGBA 값 또는 색상 이름을 사용하여 지정합니다.

 

 

 

적용된 예시를 보겠습니다.

 

html

    <h3>기본 박스 쉐도우</h3>
    <div class="box"></div>
    <h3>왼쪽에 위치한 그림자</h3>
    <div class="box-left"></div>
    <h3>흐림 반경이 큰 그림자</h3>
    <div class="box-blur"></div>
    <h3>그림자가 요소에서 멀리 퍼진 모습</h3>
    <div class="box-spread"></div>
    <h3>다중 그림자 (콤마로 구분)</h3>
    <div class="box-multiple"></div>

css

        /* 기본 박스 쉐도우 */
        .box {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            box-shadow: 2px 2px 4px #888888;
        }

        /* 왼쪽에 위치한 그림자 */
        .box-left {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            box-shadow: -4px 0 8px rgba(0, 0, 0, 0.5);
        }

        /* 흐림 반경이 큰 그림자 */
        .box-blur {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            box-shadow: 2px 2px 10px #888888;
        }

        /* 그림자가 요소에서 멀리 퍼진 모습 */
        .box-spread {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            box-shadow: 2px 2px 4px 6px #888888;
        }

        /* 다중 그림자 (콤마로 구분) */
        .box-multiple {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            box-shadow: 2px 2px 4px #888888, -2px -2px 4px #888888;
        }

 

결과

 

기본 박스 쉐도우

왼쪽에 위치한 그림자

흐림 반경이 큰 그림자

그림자가 요소에서 멀리 퍼진 모습

다중 그림자 (콤마로 구분)

 

 

다양한 예시를 들어놓은 사이트 추천

https://getcssscan.com/css-box-shadow-examples