html - 在具有渐变背景的元素上应用透明边框时出现奇怪的效果

Question

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

为什么这会在元素的左侧和右侧显示出奇怪的效果，我能做些什么？

这是 fiddle :http://jsfiddle.net/fzndodgx/3/

Answer 1

那是因为gradient的起点和终点在padding-box的边缘，而border渲染在填充框。因此，边框看起来很有趣，因为 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/