투명한 테두리로 인해 그라데이션 배경이 깨지는 이유는 무엇이며 어떻게 해결할 수 있습니까?

테두리 오버플로 그라데이션 배경

선형 그라데이션 배경의 요소에 투명한 테두리를 추가하면 예상치 못한 효과가 발생할 수 있습니다. 왼쪽, 오른쪽 색상이 부정확하고 밋밋해 보일 수 있습니다.

원인

테두리가 그려지는 동안 그라데이션이 패딩박스 가장자리까지 확장됩니다. 이 지역 밖에서. 이러한 차이로 인해 시각적으로 바람직하지 않은 결과가 발생합니다.

해결 방법

이 문제를 해결하려면 테두리 대신 box-shadow:inset을 사용하는 것이 좋습니다. box-shadow:inset는 패딩 상자 내에서 렌더링되어 배경 모양에 영향을 주지 않고 테두리 효과를 모방합니다.

수정된 CSS:

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);
padding: 10px;

참고: box-shadow는 공간을 차지하지 않으므로 패딩을 조정하세요.

일러스트:

[패딩박스 및 보더박스 일러스트 이미지 여기]

데모:

http://jsfiddle.net/ilpo/fzndodgx/5/

위 내용은 투명한 테두리로 인해 그라데이션 배경이 깨지는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!