요소의 왼쪽과 오른쪽에만 상자 그림자를 만들려면 어떻게 해야 합니까?

상자 그림자 사용자 정의: 왼쪽과 오른쪽에만 그림자 얻기

요소의 시각적 매력을 향상시키기 위해 다음을 목표로 합니다. 왼쪽과 오른쪽에만 나타나는 상자 그림자를 통합합니다. 그러나 현재 구현으로 인해 모든 면에 그림자가 나타납니다. 이 문제를 해결하기 위해 여러 개의 상자 그림자를 사용하는 솔루션을 살펴보겠습니다.

먼저 원하는 면에 그림자를 만드는 데 집중해 보겠습니다. 속성 내의 값을 조정하여 수평 및 수직 오프셋을 설정할 수 있습니다. 다음 코드를 살펴보세요.

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

이 예에서 첫 번째 box-shadow는 왼쪽 가장자리에서 12픽셀, 그 아래 15픽셀에 오른쪽으로 확장되는 그림자를 만듭니다. 두 번째 box-shadow는 오른쪽 그림자를 흉내낸 것입니다.

단, 위쪽과 아래쪽 가장자리에 그림자가 부족하여 그림자에 약간의 틈이 보일 수 있습니다. 이 문제를 해결하려면 추가 상자 그림자가 필요합니다.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

이러한 추가 그림자는 요소 주위에 흰색 "경계"를 만들어 마스킹을 도입합니다. 이렇게 하면 간격이 효과적으로 숨겨져 깨끗한 수평 그림자가 만들어집니다.

이 기술은 완벽하지 않을 수 있으며 약간의 결함이 발생할 수 있다는 점을 기억하세요. 그러나 이는 왼쪽과 오른쪽에만 그림자를 구현하는 실용적인 접근 방식을 제공하여 요소의 미적 매력을 향상시킵니다.

위 내용은 요소의 왼쪽과 오른쪽에만 상자 그림자를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!