奇怪的渐变边框效果

在以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/

Answer 1

这是因为gradient的起点和终点位于padding-box的边缘，并且border在padding-box外呈现。 所以，边框看起来很有趣，因为在padding-box外侧的每个边都重复background以覆盖border-box 。

box-shadow:inset在padding-box呈现（就像背景一样），并在视觉上给出了和border相同的效果，所以你可以尝试用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/

Answer 2

解

解决这个问题最简单的方法是将background-origin属性的值设置为border-box 。

 .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); background-origin: border-box; } 

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

Answer 3

背景在边界之下重复。 背景仅在元素的“主体”中运行，在边界下是扩展并重复开始发生。

看到这个例子在边界上no-repeat 。

UPDATE

玩背景的position和size可以帮助扩大背景，然后调整它的位置。

检查这个小提琴 。

或看到片段：

 .colors { padding: 10px; 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); background-size: 117%; background-position-x: 130px; } 

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

Answer 4

根据默认CSS盒模型的行为，渐变在填充框中开始，因此，在起始和最终颜色出现之前，渐变颜色会出现，直到渐变的任何一侧，即渐变边界所在的位置。

这个渐变（NSFW）也是如此：

它始终在左边的起始值（紫色）中无限延伸，并以最终值（橙色）向右无限延伸。 它可以继续无限地向上渐变，所以它可以。

这是我的理解为什么这是出现如此，解决scheme将使用不同的盒子模型。

Answer 5

background-origin属性的默认值是padding-box ，这意味着背景的位置和大小是相对于填充框的。

由于background-clip属性默认为border-box ，所以背景也在边界下方延伸 ; 它只是在边界之下重复自己。 这就是为什么你看到左边界下面的背景的右侧，反之亦然。

所以，只要改变原点：

 .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); background-origin: border-box; } 

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

Answer 6

其他答案已经显示了如何解决这个问题，但我想我应该指出，如果你增加border-width ，很明显，背景实际上是重复的。

 .colors { width: 100px; border: 100px solid rgba(0,0,0,0.2); height: 50px; background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5); } 

会产生

Answer 7

如果你不想使用box-shadow ，你可以使用border-image并调整渐变的颜色： http : //jsfiddle.net/9pcuj8bw/5/

 .colors { width:100px; height: 50px; background: linear-gradient(to right, #78C5D6, #459BA8, #79C267, #C5D647, #F5D63D, #F08B33, #E868A2, #BE61A5) no-repeat; border: 10px solid; border-image: linear-gradient(to right, #0bc3b8, #068e8c, #f8c617, #ea5f24, #b2492c) 1; } 

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

Answer 8

它的工作正常。 你在块上使用透明边框，所以bg-color可以看到。 其线性渐变，使其左侧和右侧的纯色。 如果你使用固体边框，你可以看到适当的效果。 http://prntscr.com/7mo5jm