**设计图是这样的** <img src="https://img.tnblog.net/arcimg/aojiancc2/ac1b83534a414544bf20b3a5e710a071.png" width="366px"> ### 可以使用线性渐变语法：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，来单独设置阴影实现内发光的效果。