css边框颜色渐变_如何创建CSS渐变边框颜色

有了CSS3的所有新功能，我们现在可以构建无图像的网站。 过去，在显示渐变颜色时不可避免地要使用图像。

如今， 使用CSS3 Gradient Background变得更加精简 。 在之前的文章中，我们向您展示了如何以各种形式和方向将CSS3 Gradient作为背景色发挥作用。 线性 ， 椭圆和重复渐变 。

但是CSS3 Gradient不仅会停止供后台使用。 您知道吗， 您也可以在边界内使用它 ？ 继续阅读以了解如何执行此操作。

第一种方法

第一种方法是在伪元素内应用CSS3 Gradient。 好吧，让我们看看这个技巧是如何工作的。

从上到下的渐变边框

我们将从一个从顶部到底部扩散的简单渐变开始。 首先，创建一个带有div的框，如下所示。

<div class="box"></div>

.box {
	width: 400px;
	height: 400px;
	background: #eee;
}

要在框边框中形成渐变，请先在框的顶部和底部设置实线边框。 我们还创建了2个带有2个伪元素 s的矩形- :before和:after ，并以与框边框宽度相同的大小指定宽度。

将矩形放置在框的左侧和右侧，并通过background-image采用linear-gradient 。 您可以在下面看到这个技巧的结果：

从左到右边界渐变

现在，让我们以与前面的示例相同的方式创建一个横跨左右的渐变。 仅这次，我们将在左侧和右侧而不是顶部和底部添加框框。

同样，我们还利用伪元素 - :before和:after来塑造2个矩形。 但是，与前面的示例相反，我们现在将它们放在框的顶部和底部。

对角边界渐变

用这种技巧创建对角线渐变在技术上很复杂。

尽管如此，我们还是依靠2个伪元素 :before和:after并使用linear-gradient 。 但是，这一次，我们将在伪元素内采用2 linear-gradient 。 每个梯度彼此相对。 有关详细信息，请参见以下源代码。

第二招

第二种方法是使用CSS3 border-image属性。 CSS3中的border-image属性允许我们使用图像以及CSS3渐变来填充边框。

浏览器对border-image支持非常好； Chrome，Internet Explorer 11，Firefox，Safari和Opera都可以完全呈现border-image 。 但是，应注意， border-image仅适用于矩形或盒子。

这意味着添加border-radius会偏离border-image输出。

以下是border-image属性规范：

border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>;

<source>是指定边框中使用的图像的路径。 在这里，我们将使用CSS3 Gradient代替它。 为了获得与前面示例相同的输出，我们在border-image内应用CSS3 Gradient，如下所示。

.box{
	width: 250px;
	height: 250px;
	background: #eee;
	border: 20px solid transparent;
	-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
	-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
	border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
	border-image-slice: 1;
}

如果不指定border宽度，则border-image将不显示任何内容。 因此，如您在上面看到的，我们添加了20px的边框宽度和透明的边框颜色。 然后，我们为早期Webkit和Firefox版本设置border-image和linear-gradient以及供应商前缀。

上面显示的border-image-slice的添加将设置image-border内容的内部偏移量。 需要此属性才能在框的周围完全显示渐变。 请参见下面的输出：

这种方法提供了更大的灵活性，可以在每个可能的方向上调整梯度。 从左到右，从上到下，对角线或成一定角度。 以下是一些示例：

从左到右渐变

对角渐变

翻译自: https://www.hongkiat.com/blog/css-gradient-border/