在vue重新渲染页面的时候，报了一个错误：
Gradient has outdated direction syntax. New syntax is like `to left`
翻译了报错信息后，Gradient has outdated direction syntax. New syntax is like to left instead of right.
翻译：渐变有过时的方向语法。新语法与 “to left” 类似。
意思是这个写法过时了，需要加上 to ,然后改变方向,比如 right 改为 to left ,left 则改为 to right.
@博客园
linear-gradient()
语法：
取值：
下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
- <angle>：
- 用角度值指定渐变的方向（或角度）。
- to left：
- 设置渐变为从右到左。相当于: 270deg
- to right：
- 设置渐变从左到右。相当于: 90deg
- to top：
- 设置渐变从下到上。相当于: 0deg
- to bottom：
- 设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
- <color>：
- 指定颜色。
- <length>：
- 用长度值指定起止色位置。不允许负值
- <percentage>：
- 用百分比指定起止色位置。
说明：
用线性渐变创建图像。- 如果想创建以对角线方式渐变的图像，可以使用
to top left 这样的多关键字方式来实现。 用默认的渐变方向绘制一个最简单的线性渐变
兼容性：
| IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|
| 6.0-9.0 #2 | 2.0-3.5 | 4.0-9.0
-webkit-#1 | 3.1-3.2 | 15.0+ | 3.2-4.3
-webkit-#1 | 2.1-3.0
-webkit-#1 | 10.0-25.0
-webkit-#1 |
| 10.0+ | 3.6-15.0
-moz- | 10.0-25.0
-webkit- | 4.0-5.0
-webkit-#1 | 5.0-6.1 | 4.0-4.3
-webkit- | 26.0+ |
| 16.0+ | 26.0+ | 5.1-6.0
-webkit- | 7.0+ | 4.4+ |
| 6.1+ |
- 使用过时的语法：-webkit-gradient(linear,…)
- IE6.0-9.0使用私有滤镜来实现该效果: progid:DXImageTransform.Microsoft.Gradient()
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>linear-gradient()</title>
<meta name="author" content="81hu.com" />
<style>
div {
width: 200px;
height: 100px;
margin-top: 10px;
border: 1px solid #ddd;
}
.test {
background: linear-gradient(#fff, #333);
}
.test2 {
background: linear-gradient(#000, #f00 50%, #090);
}
.test3 {
background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
}
.test4 {
background: linear-gradient(45deg, #000, #f00 50%, #090);
}
.test5 {
background: linear-gradient(to top right, #000, #f00 50%, #090);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
@CSS3
