이미지나 트릭 없이 수평 상자 그림자를 만드는 방법은 무엇입니까?

수평 박스 섀도우를 구현하는 방법

수평 박스 섀도우를 왼쪽과 오른쪽(수평?)에만 사용하는 방법 어떤 트릭이나 이미지가 상자 그림자 효과를 얻습니까?

다음 코드를 사용하면 주변 그림자 효과가 생성됩니다.

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

해결책: 여러 상자 그림자 사용

여러 상자를 사용할 수 있습니다. -shadow는 이 문제를 해결합니다. 각 box-shadow는 해당면:

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

불완전한 섀도우 마스킹(선택 사항)

블리딩 효과를 더욱 마스킹하려면 하단과 상단에 2개의 레이어를 추가하여 마스킹합니다. :

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