이상한 그라데이션 테두리 효과

이상한 그라데이션 테두리 효과

---

를 linear-gradient배경으로 한 요소 위에 투명한 테두리를 적용하면 이상한 효과가 나타납니다.

요소의 왼쪽과 오른쪽에 적절한 색상이없고 (어느 정도 전환됨) 이상하게 평평 합니다.

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);
}

요소의 왼쪽과 오른쪽에 이상한 효과가 나타나는 이유 는 무엇 이며 어떻게 해야합니까?

다음은 바이올린입니다 : http://jsfiddle.net/fzndodgx/3/

---

의 그의 시작과 끝 점 때문에 gradient의 가장자리에있는 padding-box및 border외부 렌더링됩니다 padding-box. (가) 때문에 그래서, 테두리 재미 보는 background외부 양쪽에 반복 padding-box다루 border-box.

이 box-shadow:inset내부 렌더링 padding-box(단지 배경 등) 시각적으로 같은 효과를 제공합니다 border사용하려고 할 수 있도록, 그 대신에 border:

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

a box-shadow는 공간을 차지하지 않기 때문에 그에 따라 패딩을 늘려야합니다.

padding-box및 그림 border-box:

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

---

해결책

이 문제를 해결하는 가장 간단한 방법은 background-origin속성 값을 border-box.

.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);
  background-origin: border-box;
}

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

---

문제에 언급 된 행동의 이유

다음은 background이 경우에 배경 그라데이션이 표시되는 방식을 결정 하는 관련 속성입니다.

• background-origin-기본값은 padding-box입니다. 이는 배경이 실제로 패딩 상자를 기준으로 위치하므로 border.
• background-repeat-기본값은 repeat입니다. 이는 전체 배경 페인팅 영역을 덮기 위해 필요한만큼 이미지를 반복해야 함을 의미합니다.
• background-clip-기본값은 border-box입니다. 상자 테두리가 차지하는 영역 아래에도 이미지가 있어야 함을 의미합니다.

이제 세 가지를 모두 결합하면 테두리가 테두리 아래에도 나타나기 위해 테두리가 가능한 한 많이 반복되어야하며 시작 위치가 상자 테두리 뒤에 있음을 알 수 있습니다. 이는 왼쪽 테두리 아래 영역을 채우기 위해 배경이 순환 방식으로 반복되어야 함을 의미합니다. 이 때문에 왼쪽 테두리의 색상은 그래디언트의 오른쪽 끝이며 그 반대의 경우도 마찬가지입니다.

으로 변경 border-box하여 테두리 상자를 기준으로 배경을 배치합니다. 이 설정 은 배경 이미지의 크기에도 영향을 미치며 그 이유는 아래에서 자세히 설명합니다.

---

왜 작동 box-sizing: border-box하지 않습니까?

이 속성은 상자의 크기에만 영향을 미치기 때문에 box-sizing로 설정 border-box하면 변경되지 않습니다. 다음에 대해서는 전혀 영향을 미치지 않습니다.

• 그래디언트 이미지의 크기 (실제 계산 논리는 아래에 설명되어 있음)
• 그라디언트 이미지의 시작점 (또는 위치)
• 배경 이미지의 반복

---

그래디언트의 크기는 어떻게 계산됩니까?

당으로 W3C 사양 아래는 명시 적으로 크기가 제공되지 때 이미지의 크기가 (기본값은 계산하는 방법이다 auto).

상기 중간 화상 극한 폭이나 높이 극한도없는 '포함'에 관해서는, 그 크기가 결정

상자의 크기가 아니라 이미지의 크기에 대해 어떻게 말하는지 확인하십시오. 본질적으로 상자의 크기에 관계없이 contain이미지 자체에 고유 높이가없는 경우 ( CSS 그래디언트가 이미지와 다른 점이 없는) 키워드에 대한 정의에 따라 배경 이미지의 크기가 계산 됩니다 .

에 대한 정의contain 는 다음과 같습니다.

이미지의 너비와 높이가 모두 배경 위치 지정 영역에 맞을 수 있도록 이미지의 원래 가로 세로 비율 (있는 경우)을 유지하면서 가장 큰 크기로 조정 합니다 .

배경 위치 지정 영역 은 다음과 같이 정의됩니다 ( background-origin속성 정의 아래 ).

단일 상자로 렌더링 된 요소의 경우 배경 위치 지정 영역을 지정합니다.

따라서 이미지에 고유 높이가없는 경우 (이 경우에는 없음 background-size) 이미지의 크기는 background-origin의 값 (이 경우는 padding-box)과 같습니다.

이것이 box-sizingas border-box를 설정해 도 효과가없는 이유 입니다.

^{참고 : 인용 된 텍스트 내의 강조는 모두 내 것입니다.}

---

을 background-size상자의 크기로 명시 적으로 설정하면 문제가 왼쪽이 아닌 오른쪽에서 해결되는 방식을 알 수 있습니다. 이것은 이미지가 오른쪽 테두리 아래에서 반복되지 않을만큼 충분히 크지 만 시작점이 여전히 왼쪽 테두리 뒤에 있기 때문입니다.

.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);
  background-size: 110px 60px;
}
.colors-2 {
  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-sizing: border-box;
  background-size: 100px 50px;
}

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

---

배경은 테두리 아래에서 반복됩니다. 배경은 요소의 "본문"에서만 실행되며 테두리 아래에는 확장이 있고 반복 시작이 발생합니다.

테두리에있는 이 예를 참조하십시오 no-repeat.

최신 정보

배경으로 재생 position및 size그것의 위치를 조정 한 후 배경을 확대하고함으로써 수 있습니다 도움이됩니다.

이 바이올린 을 확인하십시오 .

또는 스 니펫 참조 :

.colors {
  padding: 10px;
  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);
  background-size: 117%;
  background-position-x: 130px;
}

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

---

그래디언트는 기본 CSS 상자 모델 동작에 따라 패딩 상자 내에서 시작되므로 테두리가있는 그래디언트의 어느 쪽이든 무한대까지 시작 및 끝 색상이 나타납니다.

이 그라디언트 (NSFW)도 마찬가지입니다.

왼쪽의 시작 값 (보라색)에서 무한히 계속되고 오른쪽의 끝 값 (주황색)에서 무한히 계속됩니다. 이 그래디언트를 사용하면 무한히 위쪽으로 계속 될 수 있습니다.

That's my understanding of why this is appearing so, a solution would to use a different box model.

---

The default value of background-origin property is padding-box which means the background is positioned and sized relative to the padding box.

The background also extends below border since the background-clip property defaults to border-box; it simply repeats itself below the border. This is why you see the right side of background below left border and vice versa.

So, just change the origin:

.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);
  background-origin: border-box;
}

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

Alternately you can play with background size and position: add 20px to the background size and position it at -10px -10px:

.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);
  background-position: -10px -10px;
  background-size: calc(100% + 20px) calc(100% + 20px);
}

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

---

Other answers have already shown how to fix the issue, but I thought I should just point out that if you increase the border-width it becomes apparent that the background is actually repeating.

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

생산할 것이다

---

을 사용하지 않으려면 그라디언트 색상을 box-shadow사용 border-image하고 조정할 수 있습니다 . http://jsfiddle.net/9pcuj8bw/5/

.colors {
    width:100px;
    height: 50px;
    background: linear-gradient(to right, 
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5) no-repeat;
    border: 10px solid;
    border-image: linear-gradient(to right, 
        #0bc3b8,
        #068e8c,
        #f8c617,
        #ea5f24,
        #b2492c) 1;
}

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

주의 이 IE10 이하에없는 작동합니다 http://caniuse.com/#feat=border-image

---

제대로 작동합니다. 블록에 투명한 테두리를 사용했기 때문에 bg-color가 보입니다. 선형 그래디언트이므로 왼쪽과 오른쪽에 단색이 있습니다. 단색 테두리를 사용하면 적절한 효과를 볼 수 있습니다. http://prntscr.com/7mo5jm

참고 URL : https://stackoverflow.com/questions/31115024/weird-gradient-border-effect