투명한 테두리가 그라데이션 배경을 왜곡하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

그라디언트 배경의 투명 테두리 왜곡

선형 그라데이션 배경의 요소에 투명 테두리를 적용하면 독특한 시각 효과를 얻을 수 있습니다. 요소의 가장자리가 왜곡되거나 "평평하게" 나타나는 경우. 이는 그라데이션이 패딩 박스를 넘어 보더 박스까지 확장되어 테두리가 색상을 방해하기 때문에 발생합니다.

효과 원인

문제 그라디언트와 테두리의 렌더링 순서가 다르기 때문입니다. 그라데이션은 패딩 상자 내에 그려지고 테두리는 패딩 상자 외부에 렌더링됩니다. 결과적으로 테두리가 그라데이션 위에 겹쳐 원치 않는 효과가 생성됩니다.

해결책: 대신 상자 그림자 사용

이 문제를 해결하려면 상자 그림자 사용을 고려하세요. 테두리 대신 삽입합니다. Box-shadow는 그라데이션과 유사하게 padding-box 내에서 렌더링되어 겹침 문제를 제거합니다.

코드 샘플

.colors {
    width: 100px;
    height: 50px;
    background: linear-gradient(
        to right,
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5
    );
    box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 10px;
}

사용 시 이점 Box Shadow

box-shadow를 사용하면 여러 가지 이점을 얻을 수 있습니다. 장점:

• 배경 렌더링에 영향을 주지 않고 테두리와 동일한 시각적 효과를 생성합니다.
• Box-shadow는 물리적 공간을 차지하지 않으므로 그에 따라 패딩을 조정할 수 있습니다. .

바이올린 시연

참고 실제 효과를 보려면 바이올린을 따르세요. http://jsfiddle.net/ilpo/fzndodgx/5/

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