奇怪的渐变边框效果 [英] Weird gradient border effect

问题描述

在以线性渐变为背景的元素上应用透明边框时，我会得到一个奇怪的效果。

>

注意元素的左侧和右侧没有合适的颜色（它们以某种方式切换），并且奇怪地平。

HTML

 < div class =colors> 
< / div> 
  

CSS

  .colors {
 width：100px; 
 border：10px solid rgba（0,0,0,0.2）; 
 height：50px; 
 background：linear-gradient（向右，
＃78C5D6，
＃459BA8，
＃79C267，
＃C5D647，
＃F5D63D，
＃F08B33，
＃E868A2，
＃BE61A5）; 
} 
  

为什么

这里是小提琴：

When applying a transparent border over an element with a linear-gradient as the background, I get a weird effect.

Notice the left and right sides of the element don't have the proper colours (they're some way switched) and are weirdly flat.

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

Why is this showing a weird effect on the left and right side of the element, and What can I do about it?

Here is the fiddle: http://jsfiddle.net/fzndodgx/3/

解决方案

That's because the starting and ending points of the gradient are at the edges of the padding-box and border is rendered outside the padding-box. So, the borders look funny because the background is repeated on each side outside the padding-box to cover the border-box.

The box-shadow:inset is rendered inside the padding-box (just like background) and gives visually the same effect as a border, so you could try using that in place of border:

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

Because a box-shadow doesn't take up any space, you need to increase your padding accordingly.

Illustration of padding-box and border-box:

Demo http://jsfiddle.net/ilpo/fzndodgx/5/

这篇关于奇怪的渐变边框效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！