CSS 상자 그림자

먼저 기본 사항

통사론

box-shadow: inset(opt) x-offset(req) y-offset(req) blur-radius(opt) spread-radius(opt) color(opt);

Definitions are already available in MDN so I am not repeating here, & infact MDN/W3S are best for web dev references, I cant do any better.

사용 사례 1:

이 예에서는 흐림 반경 매개변수만 사용하고 있습니다. blur-radius를 사용하여 흐림 효과를 만들지만 단색 그림자를 원하면 대신 spread-radius를 사용하십시오(사용 사례 2).

.shadow-1{
    box-shadow: 0 0 10px;
}

사용 사례 2:

이 예에서는 스프레드 반경만 사용하겠습니다. 확산 반경만 사용하고 컨테이너 주위에 윤곽선과 같은 효과를 생성합니다. 물론 아웃라인을 대신 사용할 수 있지만 이는 아웃라인의 대안입니다.

.shadow-4{
    box-shadow: 0 0 0 4px rgb(64,74,87);
}

Pro Tip: You can ignore the rgb color above .shadow-4 class and system will use the font color to create the shadow. This applies to all cases.

사용 사례 3:

이제 초점을 처음 2개의 매개변수 x-offset과 y-offset으로 옮길 수 있을 것 같습니다.

.shadow-5{
    box-shadow: 4px 0;
}

보시다시피 우리는 x축에만 그림자를 얻습니다. 4px의 양수x-offset 값만 추가했습니다. y-offset는 0이지만 필수 매개변수이므로 작성해야 합니다.



이제 y-offset만 시도하고 예상대로-

.shadow-5{
    box-shadow: 0 4px;
}

x & y 오프셋을 함께 사용해 봅시다.

.shadow-5{
    box-shadow: 4px 4px;
}

사용 사례 4:

이제 4개의 매개변수(x,y,blur,spread)가 개별적으로 사용할 때 의미가 있기를 바랍니다. 이제 모든 것을 함께 결합하고 우리가 얻는 것을 봅시다.



몇 가지 기본 사항이 더 있습니다...

사용 사례 5:

상자 그림자의 또 다른 흥미로운 용도는 여러 레이어를 만드는 것입니다. 쉼표로 구분된 상자 그림자 값 목록을 사용하여 여러 레이어의 그림자를 표시할 수 있습니다.

.shadow-8{
    box-shadow: 0 0 0 14px rgb(64,74,87),
                0 0 0 28px rgb(56, 250, 82),
                0 0 0 42px rgb(56, 179, 250);
}

사용 사례 6:

다음 속성은 inset 키워드의 사용입니다. 지금까지 대상 요소 외부에 그림자를 생성하기 위해 box-shadow를 사용하는 것을 알아봤습니다. inset 키워드를 사용하여 그림자의 방향을 안쪽으로 변경할 수 있습니다.

.shadow-9{
    box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.5);  
}

흐림 대 확산

box-shadow를 구현할 때 블러와 확산 반경 사이에 정말 혼란스러웠습니다. 사용 사례 1 및 2에서 확산 반경을 사용하면 흐림 반경이 흐림을 생성하는 견고한 구조가 생성됨을 알 수 있습니다.

흐림이나 번짐을 따로 사용하거나 함께 사용할 수 있습니다.

.shadow-10{
    box-shadow: 0 0 4px 4px ;
}

지금은 여기까지입니다. 지식에 대한 탐구는 결코 끝나지 않아야 합니다. 계속 배우세요 ✌

Céline Martin에서 Pixabay의 배너 이미지