CSS의 box-shadow 속성은 개발자가 HTML 요소에 깊이와 차원을 도입하는 효과적인 메커니즘 역할을 합니다. 그림자를 요소에 통합함으로써 사용자 인터페이스의 사실성과 시각적 매력을 향상시킬 수 있습니다. 이 문서에서는 box-shadow의 기본 사항을 자세히 살펴보고 응용 프로그램을 익히는 데 도움이 되는 예제를 제공합니다.

기본 이해

box-shadow 속성은 그림자가 나타나는 방식을 정의하는 여러 값으로 구성됩니다. 기본 구문은 다음과 같습니다.

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: 이 매개변수는 그림자의 수평 변위를 정의합니다. 양수 값은 그림자를 오른쪽으로 이동하고, 음수 값은 왼쪽으로 이동합니다.
• offset-y: 이 매개변수는 그림자의 수직 변위를 나타냅니다. 양수 값은 그림자를 아래로 이동시키고, 음수 값은 그림자를 높입니다.
• blur-radius (선택 사항): 이 설정은 그림자의 부드러움을 조절합니다. 값이 높을수록 그림자가 더 확산됩니다. 이 매개변수를 지정하지 않으면 기본값은 0이며 뚜렷한 그림자를 생성합니다.
• 확산 반경 (선택 사항): 이 매개변수는 그림자의 크기에 영향을 줍니다. 양수 값은 그림자 크기를 늘리고 음수 값은 그림자 크기를 줄입니다.
• color: 이 속성은 그림자의 색상을 정의합니다. #000, rgba(0,0,0,0.5) 또는 hsl(0, 0%, 50%)와 같은 유효한 CSS 색상 표현일 수 있습니다.

예: 기본 상자 그림자

버튼에 적용된 상자 그림자의 간단한 예를 살펴보겠습니다.

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

이 경우 그림자는 가로 및 세로로 5px만큼 오프셋되고, 흐림 반경은 10px이며, 0.3의 검정으로 색상이 지정됩니다. 불투명.

예: 그림자 삽입

box-shadow는 요소 내부에 그림자를 배치하여 움푹 들어간 효과를 주는 inset 키워드도 지원합니다.

div {
  box-shadow: inset 0 0 10px #000;
}

여기서는 div 내부에 그림자를 넣어서 내용이 안쪽으로 밀린 듯한 효과를 줍니다.

고급 팁

• 각 box-shadow 사양을 쉼표로 구분하여 여러 그림자를 생성할 수 있습니다. 이 기술을 사용하면 복잡하고 계층화된 그림자 효과를 만들 수 있습니다.

box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

• 그림자 효과는 호버 상호 작용을 생성하여 버튼이나 카드의 상호 작용을 향상시키기 위해 자주 사용됩니다.

button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}

보다 시각적인 접근 방식을 선호하는 경우 Box-Shadow CSS 생성기를 확인하세요. 이 도구를 사용하면 코드를 작성하거나 사전 설정을 저장하지 않고도 손쉽게 사용자 정의 상자 그림자 효과를 만들 수 있습니다.