선형 그라데이션의 투명한 테두리로 인해 색상이 바뀌고 병합되는 이유는 무엇입니까?

그라데이션 배경의 투명성: 이상한 테두리 효과 조사

선형 그라데이션 배경이 있는 요소에 투명 테두리를 추가할 때 특이한 현상이 발생합니다. 왼쪽과 오른쪽 가장자리의 색상이 서로 바뀐 것처럼 부정확하게 나타납니다. 또한 이러한 섹션은 평평한 모양을 나타냅니다.

HTML 조각:

<div class="colors"></div>

CSS 구성:

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

원인 효과:

이 문제는 그라데이션의 시작점과 끝점이 패딩 상자의 가장자리에 위치하기 때문에 발생합니다. 그러나 테두리는 패딩 상자 외부에 그려집니다. 배경이 각 측면의 테두리 상자를 반복하므로 테두리가 독특하게 나타납니다.

상자 그림자를 사용한 솔루션:

테두리의 시각적 효과를 재현하려면 이 문제가 없으면 box-shadow 사용을 고려해 보세요.

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

box-shadow는 공간을 차지하지 않으므로 조정이 필수적입니다. 그에 따라 패딩이 적용됩니다.

Padding-Box 및 Border-Box 다이어그램:

[padding-box 및 border-box 이미지]

라이브 데모:

이에서 수정된 동작을 살펴보세요. JSFiddle: http://jsfiddle.net/ilpo/fzndodgx/5/

위 내용은 선형 그라데이션의 투명한 테두리로 인해 색상이 바뀌고 병합되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!