相关疑难解决方法(0)

当在具有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/