한 요소를 제외한 요소의 모든 면을 음영 처리하는 사용자 정의 상자 그림자를 어떻게 만들 수 있습니까?

요소의 특정 면에 상자 그림자 적용

이 CSS3 관련 질문에서 사용자는 전통적인 상자 그림자와는 달리 사용자 정의 상자 그림자를 만들려고 합니다. box-shadow는 한 요소를 제외한 요소의 모든 면을 음영 처리합니다. 원하는 결과는 열려 있는 탭에 눈에 보이는 그림자가 있고 전체 탭 섹션 하단에 별도의 그림자가 있는 탭 탐색 모음을 갖는 것입니다.

이 문제를 해결하는 열쇠는 상자 그림자 속성. CSS3의 box-shadow는 네 가지 개별 값을 취합니다:

1. 수평 오프셋: 그림자의 왼쪽 또는 오른쪽 거리
2. 수직 오프셋: 위 또는 아래 그림자의 거리
3. 흐림 반경: 그림자에 적용되는 흐림 정도
4. 확산: 크기에 오프셋이 추가됩니다. 그림자 상자

이 특정 시나리오에서는 이러한 값을 조작하여 특정 측면의 음영만 제어할 수 있습니다.

전체에 대해 위쪽 및 안쪽을 향한 측면 그림자를 생성하려면 탭 섹션에서는 처음 두 값을 0(오프셋 0)으로 설정하고 흐림 반경을 조정하고 그에 따라 퍼집니다.

개별 탭의 그림자에 대해 #content 요소 내에 div를 생성하고 이를 기준으로 위치를 지정합니다. 부모. 새 div는 단색 배경을 받고 그림자가 정의됩니다. 상위 #content 자체에는 패딩이 제거되고 별도의 그림자가 추가되었습니다.

마지막으로 각 탭에 그림자를 적용하기 위해 #nav li 요소 내의 앵커를 대상으로 합니다. 부모를 기준으로 위치를 지정하고 원하는 그림자 값을 정의합니다.

이러한 기술을 사용하면 사용자는 열린 요소를 제외한 탭 요소의 모든 측면에서 원하는 음영 효과를 얻을 수 있으며 탭 요소를 효과적으로 구분할 수 있습니다. 다른 탭에서.

위 내용은 한 요소를 제외한 요소의 모든 면을 음영 처리하는 사용자 정의 상자 그림자를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!