css中常见渐变样式的设置

border设置渐变色

border-right: 1px solid;
border-image: linear-gradient(white,red,white)1 10 1;

css设置阴影（div投影颜色）

box-shadow: 1px 1px 1px 1px #8dd7ec;

css设置背景渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: 用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...: 用于指定渐变的起止颜色。

// 从左侧开始的线性渐变，从红色开始，转为黄色:
#grad {
  background-image: linear-gradient(to right, red , yellow);
}
// 渐变从左向右渐变，需加属性前缀-webkit，支持Chrome浏览器
.regulaContainer /deep/ .el-button--primary {
  background: -webkit-linear-gradient(left, #31aaff, #156cfb);
}

• -webkit-代表safari、chrome私有属性
• -moz-代表firefox浏览器私有属性
• -ms-代表IE浏览器
• -o-代表Opera

参考文献

css3中属性前缀（-moz、-ms、-webkit、-o-）