如何创建CSS渐变边框颜色

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

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

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

第一种方法

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

从上到下的渐变边框

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

的HTML

的CSS

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

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

.xx {
  margin: 50px auto;
  width: 250px;
  height: 250px;
  border-top: 20px solid #3ACFD5;
  border-bottom: 20px solid #3a4ed5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-background-size: 20px 100%;
  -moz-background-size: 20px 100%;
  background-size: 20px 100%;
  background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
}

从左到右边界渐变

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

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

.yy {
  margin: 50px auto;
  width: 250px;
  height: 250px;
  border-left: 20px solid #3ACFD5;
  border-right: 20px solid #3a4ed5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 0 100% ;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 20px;
  -moz-background-size: 100% 20px;
  background-size: 100% 20px;
  background-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
  background-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
  background-image: -o-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
  background-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
}

对角边界渐变

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

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

.zz {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 50px auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.zz:before,
.zz:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.zz:before {
  background-position: 0 0, 0 100% ;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 20px;
  -moz-background-size: 100% 20px;
  background-size: 100% 20px;
  background-image: -webkit-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%), -webkit-linear-gradient(right, #3a4ed5 0%, #3a8ed5 100%);
  background-image: -moz-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%), -moz-linear-gradient(right, #3a4ed5 0%, #3a8ed5 100%);
  background-image: -o-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%), -o-linear-gradient(right, #3a4ed5 0%, #3a8ed5 100%);
  background-image: linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%), linear-gradient(to left, #3a4ed5 0%, #3a8ed5 100%);
}
.zz:after {
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-background-size: 20px 100%;
  -moz-background-size: 20px 100%;
  background-size: 20px 100%;
  background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a8ed5 100%), -webkit-linear-gradient(to top, #3a4ed5 0%, #3a8ed5 100%);
  background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a8ed5 100%), -moz-linear-gradient(to top, #3a4ed5 0%, #3a8ed5 100%);
  background-image: -o-linear-gradient(top, #3acfd5 0%, #3a8ed5 100%), -o-linear-gradient(to top, #3a4ed5 0%, #3a8ed5 100%);
  background-image: linear-gradient(to bottom, #3acfd5 0%, #3a8ed5 100%), linear-gradient(to top, #3a4ed5 0%, #3a8ed5 100%);
}

第二招

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

浏览器对的支持border-image非常好。Chrome，Internet Explorer 11，Firefox，Safari和Opera都可以完全渲染border-image。但是，应注意，border-image只能在矩形或盒子上使用。

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

以下是border-image属性规范：

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

该border-image会显示什么，如果我们不指定border宽度。因此，如您在上面看到的，我们添加20px了具有透明边框颜色的边框宽度。然后，我们设置的值border-image，并linear-gradient与前面的Webkit和Firefox版本的供应商前缀一起。

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

.box{
	  width: 250px;
	  height: 250px;
      margin: auto;
	  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;
	}
这种方法提供了更大的灵活性，可以在每个可能的方向上调整梯度。从左到右，从上到下，对角线或成一定角度。以下是一些示例：

从左到右渐变

.box{
	  width: 250px;
	  height: 250px;
      margin: auto;
	  background: #eee;

	  border: 20px solid transparent;

	  -moz-border-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
	  -webkit-border-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
	  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);

	  border-image-slice: 1;
	}

对角渐变

.box{
	  width: 250px;
	  height: 250px;
      margin: auto;
	  background: #eee;

	  border: 20px solid transparent;

	  -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
	  -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
	  border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);

	  border-image-slice: 1;
	}