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

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

根本版本

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

html渐变边框css实现渐变色圆角边框 RESTful API

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);}毛病

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