在具有渐变背景的元素上应用透明边框时产生怪异效果 [英] Weird effect when applying transparent border over an element with a gradient background

问题描述

在以 linear-gradient 为背景的元素上应用透明边框时，我会得到怪异的效果.

请注意，元素的左侧和右侧没有正确的颜色(它们在某种程度上进行了切换)，并且奇怪地是 flat .

HTML

 < div class ="colors"></div> 

CSS

  .colors {宽度:100px；边框:10像素实心rgba(0,0,0,0.2);高度:50px；背景:线性渐变(向右，#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屋！