css 渐变向两侧渐变_如何在网络上使用CSS渐变

css 渐变向两侧渐变

在本教程中，您将学习有关在网络上使用渐变的信息。 我将为您提供一些示例，一些练习（例如如何为边框创建渐变），并且还将提供一些有用的资源，这些资源将使创建渐变更加容易。

观看教程

渐变基础

在过去的日子里，不依靠图像来使用渐变实际上是不可能的，但是CSS的发展意味着现在可以从样式表中轻松创建渐变，并且变得可靠。

以最简单的形式，我们将渐变定义为背景图像。 我们将背景图像设置为linear-gradient或radial-gradient （仅使用速记background就可以了），然后传入起始和终止颜色：

.box {
 background: linear-gradient(#000046, #1cb5e0);   
}

默认情况下，线性渐变从上到下运行，为我们提供了以下内容：

我们可以通过在颜色之前添加新参数来更改方向，例如：

.box {
 background: linear-gradient(to right, #000046, #1cb5e0);   
}

同样，将此参数更改to top right将创建对角渐变。 您也可以通过指定45deg （或您选择的任何角度）来使对角线精确。

更进一步，您不必只停留在两种颜色上。 您也可以使用颜色名称，如下所示：

.box {
 background: linear-gradient(to right, orange, #ec38bc, #7303c0, cyan);   
}

在这种情况下，四种颜色中的每一种都将占据等量的可用空间，从而为我们提供一个平滑，平衡的渐变。

如果我们不希望均匀分布，而是希望一种颜色比另一种颜色占用更多的空间，则可以直接在该颜色之后将该值指定为百分比，如下所示：

.box {
 background: linear-gradient(to right, #f05053 80%, #e1eec3);   
}

给我们：

径向渐变

继续前进，我们可以使用到目前为止所学到的一切，并将其更改为显示径向渐变。 您只需在此处将linear-gradient切换为radial-gradient即可。

.box {
 background: radial-gradient(#fdbb2d, #22c1c3);    
}

此径向渐变延伸到其父元素，因此此矩形最终以椭圆形渐变结束。 为了限制该渐变，使其无论父级的比例如何都保持为圆形，我们可以像这样添加circle关键字：

.box {
 background: radial-gradient(circle, #fdbb2d, #22c1c3);    
}

更进一步，我们也可以指定圆渐变的来源，以便它（例如）在父级的左上方开始。

.box {
 background: radial-gradient(circle at top left, #fdbb2d, #22c1c3);    
}

效果是微妙的，但此效果与简单的线性渐变之间的差异可能正是您要寻找的。

实际使用情况

我们可以在哪里以某些有趣的方式使用渐变？

1.英雄叠加

这是一个叠加层的示例，其中渐变稍微透明（它使用rgba值）并位于照片上。

background属性可以接受多个值，这些值形成一个堆栈，第一个是最上面的值，最后一个是在堆栈底部的值。 如果我们先定义一个渐变，它将位于我们随后定义的任何东西之上。 看一下这个代码片段，看看是否可以解决正在发生的事情：

.hero {
    background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)),	url(https://bg.jpg);
}

结果是这样的：

2.文字渐变

在文本上添加渐变效果非常好，尽管在纯粹意义上并不能完全得到支持。 相反，我们依赖于background-clip属性（及其前缀-webkit-background-clip朋友），虽然有点hack，但效果很好。

我们从一小段文本（在这种情况下为h1 ）开始，并对其背景应用渐变。 给定值为text的background-clip属性然后从整个块中删除背景，除了文本后面的区域。 文字color当然会遮盖背景，因此我们将其设置为transparent以使渐变发光：

h1 {
    background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
	
    -webkit-background-clip: text;
    background-clip: text;
    
    color: transparent;
}

3.渐变边框

边界渐变是您可能在Envato Elements上看到的，它们是在视觉上为您的UI 增添趣味的好方法。 这很巧妙，但是请看一下这些按钮边框上的蓝色到紫色线性渐变：

为了达到这种效果，有两种方法。 第一个依赖于我们首先为一个元素（锚，一个容器，等等）提供透明边框。 然后，我们使用border-image属性应用渐变。 最后，我们将border-image-slice为1，以使渐变使用边框的完整轮廓。

.card1 {
    border: 5px solid transparent;
	border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d);
	border-image-slice: 1;
}

结果如下：

但是，这种方法存在两个问题。 首先，并非所有浏览器都普遍支持border-image ，最著名的是较旧版本的IE。 其次，这种方法不允许您添加border-radius如在Envato Elements UI中看到的那样。 因此，让我们看看另一种方法。

我们首先给div一个position: relative 。 然后，我们向其中添加一个伪元素，使我们选择边框宽度的绝对绝对位置为负 （在这种情况下为5px）：

.card2::after {
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
}

这将为我们提供一个覆盖整个div的坚实渐变块。 将z-index添加为-1将确保渐变块移至div的后面。

接下来（phe，此步骤有很多步骤），我们在伪元素上添加一个等于其父元素的border-radius （让我们分别应用10px）。 然后我们给父母一个我们想要的背景。 与页面背景相同将使其透明。

最后，我们再次转到我们的朋友background-clip ，将其应用于父对象，这一次为其赋予padding-box值。 最后一个操作可确保div的填充行至边框的边缘，并且不会超出边界。

因此，这种最终方法实际上并不是真正意义上的边界，但可以达到我们所寻找的效果。

第三种方法是可能的，这一次使用box-shadow来达到效果。 我建议您看看CodePen上John Grishin的Border-gradient mixin ，看看它是如何工作的。

结论

所以你去了！ CSS渐变入门为您提供了所需的入门知识，并介绍了如何在网络上使用渐变。 如果您在野外看到了渐变的其他任何创造性用法，请将其放在评论部分。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-use-gradients-on-the-web--cms-29922

css 渐变向两侧渐变