> 有时候我们的样式需要一点渐变的效果~比如下面的按钮
------------
### 1、css 设置按钮 背景色渐变
```css
#1.线性渐变
linear-gradient(a, color...)
#2.重复的线性渐变
repeating-linear-gradient
#3.径向渐变
radial-gradient
#4.重复的径向渐变
repeating-radial-gradient
```
#### 1.1 线性渐变
语法：
```css
background: linear-gradient(direction, color-stop1, color-stop2, ...)
#direction:to bottom right/left top
#或者 角度
background: linear-gradient(angle, color-stop1, color-stop2);
#angle:180deg
```
颜色 支持透明
rgba(255,0,0,0)
例子：
`background-image: linear-gradient(-90deg, #00C8BE 2%, #3FC3ED 96%);`
------------
#### 1.2 径向渐变
```css
background: radial-gradient(center, shape size, start-color, ..., last-color);
```
径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下，渐变的中心是 center(表示在中心点)，渐变的形状是 ellipse(表示椭圆形)，渐变的大小是 farthest-corner(表示到最远的角落)。
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
------------
PS:
```css
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o opera 欧鹏浏览器
-webkit-linear-gradient
-o-linear-gradient
-moz-linear-gradient
```
------------
### 2、css 设置 背景色透明
```css
background: rgba(0, 0, 0, 0.5);
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
```
有opacity属性的所有后代元素都会继承 opacity 属性，而RGBA后代元素不会继承不透明属性
------------
The End~
