Эффект пограничного градиента

При применении прозрачной границы над элементом с 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/

Ответ 1

Это потому, что начальная и конечная точки 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;

Так как box-shadow не занимает какое-либо место, вам необходимо соответственно увеличить отступы.

Иллюстрация padding-box и border-box:

Демо http://jsfiddle.net/ilpo/fzndodgx/5/

Ответ 2

Решение

Самый простой способ исправить эту проблему - установить значение для свойства 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>

Ответ 3

Фон повторяется под границей. Фон работает только в "теле" элемента, под границей происходит расширение и начинается повторное начало.

Смотрите этот пример с no-repeat на границе.

UPDATE

Воспроизведение с фоном 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>

Ответ 4

Градиент начинается в поле заполнения в соответствии с поведением модели по умолчанию в CSS-блоке, поэтому имеет смысл, что самые начальные и очень конечные цвета появляются до бесконечности с каждой стороны градиента, где будет граница.

То же самое относится к этому градиенту (NSFW):

Он продолжает бесконечно в исходном значении (фиолетовый) влево и бесконечно продолжается с конечным значением (оранжевым) вправо. Он может продолжать бесконечно вверх с помощью этого градиента, и так оно и есть.

Чтобы понять, почему это так, решение будет использовать другую коробчатую модель.

Ответ 5

Значение по умолчанию background-origin - это padding-box, что означает, что фон расположен и имеет размер относительно поля заполнения.

Фон также простирается ниже границы, так как свойство background-clip по умолчанию равно 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>

Ответ 6

Другие ответы уже показали, как исправить эту проблему, но я думал, что должен просто указать, что если вы увеличите border-width, становится очевидным, что фон действительно повторяется.

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

создаст

Ответ 7

Если вы не хотите использовать 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>

Ответ 8

Работает правильно. Вы использовали прозрачную рамку на блоке, чтобы видеть bg-color. Его линейный градиент, поэтому его сплошной цвет на левой и правой стороне. Если вы используете сплошную границу, вы можете увидеть правильный эффект. http://prntscr.com/7mo5jm