首先介绍css3中实现边框渐变

使用border-image实现，代码和效果如下

.sleepContentView{width:242rpx;height:242rpx;border:20rpx solid;/* border-image有五个参数设置，依次为 图片路径，边框向内偏移，边框宽度，边框图像区域超出边框的量，边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 */border-image: -webkit-linear-gradient(#aaf0d8, #1C9C8F) 20 20;/* Safari 和 Chrome */border-image: -moz-linear-gradient(#aaf0d8, #2ED) 20 20;/* 老的 Firefox */border-image: -o-linear-gradient(#aaf0d8, #2ED) 20 20;/* Opera */border-image: linear-gradient(#aaf0d8, #2ED) 20 20;border-radius:50%;text-align:center;font-size:28rpx;box-sizing:border-box;}<div class="sleepContentView"/>

这个时候有朋友开始心生疑惑了，不是说好了圆形渐变边框嘛，怎么是个方的，但细心的朋友会发现其实代码里写入border-radius：50%的，但依旧没有变成圆形边框，其实这个时候border-radius已经失效，所以是方形的，下面进行圆形渐变边框的讲解。

回到我们的css，使用background-image的渐变功能

大致思路是在父元素设置渐变background-image，使用一个padding，我们把这个padding值当做子元素的边框值看待，代码效果如下：

.sleepContentView{width:242rpx;height:242rpx;background-image: linear-gradient(#aaf0d8, #2ED) ;border-radius:50%;text-align:center;padding:20rpx;font-size:28rpx;box-sizing:border-box;}.sleepContentView .circle{width:100%;height:100%;background:#fff;border-radius:50%;}<div class="sleepContentView"><div class="circle"/></div>

一边学习一边分享，若有错误，欢迎大家的留言，有留必回，朋友们下期再见啦。