奇怪的渐变边框效果

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

为什么是这样显示的元素的左侧和右侧的一个奇怪的效果,有什么我可以做些什么？

这是小提琴:http://jsfiddle.net/fzndodgx/3/

Answer 1

这是因为在出发点和落脚点gradient是在的边缘padding-box,并border呈现之外padding-box.所以,边界看起来很有趣,因为在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;

因为a 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>

提到的行为的原因

以下是background确定此情况下显示背景渐变的方式的相关属性:

• background-origin- 默认值为padding-box.这意味着背景实际上是相对于填充框定位的,因此从后面开始border.
• background-repeat- 这是默认值repeat.这意味着应该根据需要重复图像以覆盖整个背景绘画区域.
• background-clip- 这是默认值border-box.这意味着图像也应该出现在盒子边框占据的区域下面.

现在结合所有这三个,我们可以看到边界必须尽可能多地重复,以便它甚至在边界下出现,并且它的起始位置在框的边界之后.这意味着必须以循环方式重复背景,以便填充左侧边界下方的区域.因此,左边框的颜色为渐变的右端,反之亦然.

通过将其更改为border-box,我们使背景相对于边框框定位.该设置还对背景图像的大小有影响,并且下面详细描述其原因.

为什么不起作用box-sizing: border-box？

设置box-sizing为border-box不会导致任何更改,因为该属性仅影响框的大小.它对以下内容完全没有影响:

• 梯度图像的大小(实际计算逻辑如下所述)
• 渐变图像的起点(或位置)
• 重复背景图像

如何计算梯度的大小？

根据W3C规范,下面是当没有提供显式尺寸时(默认值为auto),如何计算图像的尺寸.

如果图像既没有固有宽度也没有固有高度,则其大小确定为"包含"

注意它是如何谈论图像的大小而不是盒子的大小.实质上,不管盒子的大小如何,contain当图像本身没有固有高度(CSS梯度没有不同的图像)时,将根据关键字的定义计算背景图像的大小.

在其定义contain如下:

缩放图像,同时保持其固有的纵横比(如果有的话)到最大尺寸,使得其宽度和高度都可以适合背景定位区域.

背景定位区域定义如下(在background-origin属性定义下):

对于呈现为单个框的元素,指定背景定位区域

因此,当图像没有固有高度时(在这种情况下background-size也没有固有高度),图像的大小将等于background-origin值的值(在我们的例子中padding-box).

这就是为什么即使设置box-sizingas border-box也没有效果.

^{注意:引用文本中的重点都是我的}

如果您明确设置background-size为框的大小,您会注意到问题是如何解决在右侧而不是在左侧.这是因为现在图像足够大,不能在右边框下重复,但其起点仍然在左边框之后.

.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-size: 110px 60px;
}
.colors-2 {
  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);
  box-sizing: border-box;
  background-size: 100px 50px;
}

<div class="colors">
</div>
<div class="colors-2">
</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

其他答案已经展示了如何解决这个问题，但我想我应该指出，如果你增加 ，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);
}

将产生