标

使用border-image可以设置渐变色边框，但是当它与border-radius组合使用时，两者却无法兼容。

因此，实现这个效果的另一个思路是：利用两个圆角矩形的面积差形成边框。故可以使用以下方法实现：

基础版本

使用嵌套的两个div，并设置父元素的内边距padding以此制造面积差，从而形成边框的效果。

HTML

复制代码

<div class="border-box">    <div class="border-content"></div></div>

CSS

复制代码

.border-box{  width: 200px;  background:linear-gradient(0deg,#00135A,#01A1FF);  border-radius: 5px;  padding: 2px;/* 边框宽度 */}.border-content{  width: 200px;  height: 100px;  border-radius: 5px;   background-color: white;  }

简化HTML结构版：使用伪元素

使用伪元素充当背景也同样可以达到上述效果，注意设置z-index将伪元素置于内容之下

HTML

复制代码

<div class="border-content"></div>

CSS

复制代码

.border-content{  width: 200px;  height: 100px;  border-radius: 5px;    position: relative;  background-color: white;  }.border-content::before{  content: '';  position: absolute;  top: -2px; right: -2px; bottom: -2px; left: -2px;/* 边框宽度 */  border-radius: 5px;   background: linear-gradient(0deg,#00135A,#01A1FF);    z-index: -1;/* 置于内容之下 */ }

进阶版：使用background相关属性

给一个div设置两个不同大小的背景，从而利用两个背景制造面积差，也可以实现上述效果。

• 如何给div设置两个背景？

使用background-image属性设置两组颜色，一组是内容颜色，另一组是border边框颜色，用逗号隔开。

• 如何将两个背景设置成不同大小？

可以使用background-clip 属性，该属性规定了背景的绘制区域。给一组设置为padding-box（背景绘制区域从内边距框开始），第二组为border-box（背景绘制区域延伸至边框）。

此时的效果如下：

可以看出背景色并不是我们想要的效果，原因是这两组的绘制起点都是padding-box。

• 如何更改背景绘制区域的起点？

使用background-origin属性，该属性规定了背景的绘制区域相对于什么位置来定位。给一组设置为padding-box（背景绘制区域以 padding 区域为参考），第二组为border-box（背景绘制区域以 border 区域为参考）。

此时即可得到想要的效果，代码如下：

HTML

复制代码

<div class="border-content"></div>

CSS

复制代码

.border-content{  width: 200px;  height: 100px;  border: 2px solid transparent;  border-radius: 5px;  background-clip: padding-box,border-box;  background-origin: padding-box,border-box;  background-image: linear-gradient(0deg,#FFF,#fff),linear-gradient(0deg,#00135A,#01A1FF);}

缺陷

该思路无法实现透明底的渐变色圆角边框。

次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：

这样一个布局如何实现呢？

CSS 渐变几乎是无所不能的，什么的图形都能绘制，这里可以拆分一下，两个矩形，两个圆形，还有两个反向圆角，也就是 2 个 线性渐变，4 个径向渐变，示意如下：

最终实时效果如下（上面是原理图）

完整代码如下：

前篇章已经介绍过background-color背景色、background-image背景图片的使用，在css 中还可以使用渐变作为背景，其控制和性能方面比使用实际图像文件更好。如果你还不了解background(背景属性)，可以先看看这篇文章：前端入门——css颜色和背景。

什么是css 渐变

CSS 渐变通常是一种颜色淡入到另一种颜色，CSS 允许您控制渐变的方方面面，从方向、形状再到颜色以及它们如何从一种颜色过渡到另一种颜色。实际上，渐变分为三种类型：

• 线性渐变（linear-gradient）
• 径向渐变（radial-gradient）
• 圆锥渐变（conic-gradient）
• 重复渐变 —— 使用 repeating-linear-gradient 和 repeating-radial-gradient创建线性和径向重复渐变。

下面是基本语法：

/* 线性渐变 */
background-image: linear-gradient(#ff8a00, #e52e71);
background-image: linear-gradient(to right, violet, darkred, purple);
background-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);

/* 径向渐变 */
background-image: radial-gradient(#ff8a00, #e52e71);
background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);

/*圆锥渐变 */
background-image: conic-gradient(#ff8a00, #e52e71);
background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);

效果如下：

下面是重复渐变：

/*重复渐变 */
background: repeating-linear-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%)；

所有的 CSS 渐变类型都是一个颜色范围。CSS 渐变产生的颜色可以随位置不断变化，从而产生平滑的颜色过渡。也可以创建纯色带和两种颜色之间的硬过渡。以下内容适用于所有渐变函数：

使用多种颜色

无需局限于使用两种颜色，你想使用多少种颜色都可以！ 默认情况下，所设置的颜色会均匀分布在渐变路径中。

如下示例：

颜色终止位置

你可以通过给每个颜色设置 0，1% 或者 2% 或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数， 0% 表示起始点，而 100% 表示终点，但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置，那么它将会被自动计算，第一种颜色会在 0% 处停止，而最后一种颜色是 100%，至于其他颜色则是在它邻近的两种颜色的中间停止。

如下示例：

创建实线

要在两种颜色之间创建一条硬线，即创建一个条纹而不是逐渐过渡，可以将相邻的颜色停止设置为相同的位置。在此示例中，两种颜色在 50% 标记处共享一个颜色停止点，即渐变得一半：

改变渐变中心点

默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。 在如下示例中，我们将渐变的中心点由 50% 设为 10%。

最后

以上内容，大概介绍了css 渐变所包含的知识点，下面将会分多篇文章来介绍每种渐变的使用方法，你可以关注我，继续学习其它渐变知识。

其它相关文章：

• css 线性渐变
• css 径向渐变
• css 圆锥渐变
• css 重复渐变

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://css-tricks.com/a-complete-guide-to-css-gradients/