요소의 수평 측면에만 상자 그림자를 만들려면 어떻게 해야 합니까?

수평 측면에만 상자 그림자 만들기

요소의 왼쪽과 오른쪽(수평) 측면에만 걸쳐 있는 상자 그림자를 얻으려면 여러 활용을 고려하세요. box-shadow 정의.

초기 box-shadow 속성

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

요소의 모든 면에 그림자를 생성합니다. 왼쪽과 오른쪽만 대상으로 하려면 두 개의 별도 상자 그림자를 추가하세요.

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

이렇게 하면 오른쪽으로 12픽셀, 왼쪽으로 -12픽셀을 확장하는 그림자가 생성되어 원하는 효과를 얻을 수 있습니다.

상단과 하단에 그림자가 약간 번지는 현상도 발생할 수 있습니다. 이를 완화하려면 블리드 스루를 마스크하기 위해 두 개의 추가 상자 그림자를 추가하십시오.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!