Граница не прозрачная с линейным градиентом

Question

Почему, когда я применяю прозрачную рамку к div с линейным градиентом, граница не прозрачна сверху и снизу.

div { 
    width: 300px; 
    height: 300px; 
    background: linear-gradient(pink, red); 
    border: 20px solid transparent; 

}

скриншот http://i43.tinypic.com/2r3gjmx.png

Answer 1

вам нужно использовать некоторые вещи, как этот

div{ 
    width: 300px; 
    height: 300px; 
    background: linear-gradient(pink, red); 
    border: 20px solid rgba(0,0,0,0.3); 
    -moz-background-clip: padding; 
    -webkit-background-clip: padding; 
    background-clip: padding-box; 
} 

Answer 2

@ dimann90 имеет правильное решение в комментариях. Используйте элемент background-repeat: no-repeat.

Вот почему это работает:

Фоновое изображение повторяет бесконечно в направлениях х и у по умолчанию. Линейный градиент - это фоновое изображение, а размер этого изображения контролируется размером окна содержимого (это фактически more complicated, но это достаточно хорошо для наших целей). Фон элемента распространяется через прокладку и границу (но не на маржу). Таким образом, граница приведет к тому, что общий размер поля элемента будет больше, чем сформированное фоновое изображение, и оно будет повторяться. Если граница прозрачна, то повторяющееся изображение будет отображаться.