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

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;

由于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 ）。

如果图像既没有固有宽度也没有固有高度，则其大小根据“包含”确定

请注意它如何谈论图像的大小而不是盒子的大小。 本质上，无论框的大小如何，当图像本身没有固有高度（ CSS 渐变没有不同的图像）时，背景图像的大小将根据关键字contain的定义计算。

contain的定义如下：

将图像缩放到最大尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都适合背景定位区域。

背景定位区域定义如下（在background-origin属性定义下）：

对于渲染为单个框的元素，指定背景定位区域

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

这就是为什么即使将box-sizing设置为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 。

更新

使用背景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）也是如此：

它以起始值（紫色）向左无限延续，并以最终值（橙色）向右边无限延续。 它可以随着这个梯度无限向上继续，所以它确实如此。

这就是我对为什么会出现这种情况的理解，解决方案是使用不同的盒子模型。

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>

或者，您可以使用背景大小和位置：将 20px 添加到背景大小并将其定位在 -10px -10px：

 .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-position: -10px -10px; background-size: calc(100% + 20px) calc(100% + 20px); }

 <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>

小心这不适用于 IE10 或更低版本： http : //caniuse.com/#feat=border-image

Answer 8

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