如何创建CSS渐变边框颜色

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

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

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

第一种方法

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

从上到下的渐变边框

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

的HTML

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

的CSS

 

1个
2
3
4
5
.box {
  width: 400px;
  height: 400px;
  background: #eee;
}

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

放置在盒子的左侧和右侧的矩形,并使用linear-gradient通过background-image。您可以在下面看到这个技巧的结果:

从左到右边界渐变

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

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

对角边界渐变

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

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

第二招

第二种方法是使用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属性规范:

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

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

1个
2
3
4
5
6
7
8
9
10
.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-image会显示什么,如果我们不指定border宽度。因此,如您在上面看到的,我们添加20px了具有透明边框颜色的边框宽度。然后,我们设置的值border-image,并linear-gradient与前面的Webkit和Firefox版本的供应商前缀一起。

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

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

从左到右渐变

对角渐变

免责声明: 本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
侵删请致信站长

西楼网 » 如何创建CSS渐变边框颜色