css3 渐变 两边浅中间深。由中间向两边。 div边框渐变色

设计图是这样的

可以使用线性渐变语法：background: linear-gradient(direction, color-stop1, color-stop2, …)

例如从左到右的渐变，蓝色—红色—蓝色

background:linear-gradient(to left,blue,red,blue);

比如我们这里的效果应该是，白色—蓝色—白色

background:linear-gradient(to left,#fff,#3FDDFA,#fff);

但是这个设计图底部其实是有背景或者是背景图片的小格子的，所以渐变不能从白色开始，应该做成透明色的

background:linear-gradient(to left,rgba(63, 221, 250, 0),#3FDDFA,rgba(63, 221, 250, 0));

其实还可以使用百分比来调整以下渐变开始或者结束的位置
示例：

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

感觉默认应该是开始是0%,中间是50%,结束是100%。当然具体还是看文档

background:linear-gradient(to left,rgba(63, 221, 250, 0) 0%,#3FDDFA 50%,rgba(63, 221, 250, 0) 100%);

div 边框 两边浅中间深 渐变色

设计图如下：

样式：

.learnActivity_warp {
    width: 219px;
    text-align: center;
    //background-color: #abcdff;
    height: 130px;
    padding-top: 20px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-image: linear-gradient(to bottom, rgba(63, 221, 250, 0), #4288B6, rgba(63, 221, 250, 0)) 1;
    // box-shadow:-1px 0px rgba(63, 221, 250, .4) inset;
    //box-shadow: 3px 0px rgba(255, 255, 255, 0.1) inset, -3px 0px rgba(255, 255, 255, 0.2) inset;
}

两边的内发光效果可以利用box-shadow来实现，如果直接通过一个div来设置两边的内发光效果不好实现，可以通过绝对定位在边框两边放两个div，来单独设置阴影实现内发光的效果。