首先介绍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