diff --git "a/\346\235\216\344\275\263\350\261\252/\347\254\224\350\256\260/1009.md" "b/\346\235\216\344\275\263\350\261\252/\347\254\224\350\256\260/1009.md"
new file mode 100644
index 0000000000000000000000000000000000000000..48222677cc55fb27c77d207de8e10041abe1fad7
--- /dev/null
+++ "b/\346\235\216\344\275\263\350\261\252/\347\254\224\350\256\260/1009.md"
@@ -0,0 +1,100 @@
+## 线性渐变:background-image
+1. 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
+2. 渐变分为：
+- 线性渐变：沿着某条直线朝一个方向产生渐变效果。
+- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。
+- 重复渐变。
+3. Eg:
+```javascript
+
+    background-image: linear-gradient(方向, 起始颜色, 终止颜色);
+
+    background-image: linear-gradient(to right, yellow, green);
+```
+5. 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。
+6. 格式举例：
+
+```html
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        div {
+            width: 500px;
+            height: 100px;
+            margin: 10px auto;
+            border: 1px solid #000;
+        }
+
+        /* 语法：
+            linear-gradient(方向，起始颜色，终止颜色);
+            方向：to left   to right  to top   to bottom 　角度　30deg
+            起始颜色
+            终止颜色
+        */
+        div:nth-child(1) {
+            background-image: linear-gradient(to right, yellow, green);
+        }
+
+        /* 不写方向，表示默认的方向是：从上往下 */
+        div:nth-child(2) {
+            background-image: linear-gradient(yellow, green);
+        }
+
+        /* 方向可以指定角度 */
+        div:nth-child(3) {
+            width: 100px;
+            height: 100px;
+            background-image: linear-gradient(135deg, yellow, green);
+        }
+
+        /* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
+        div:nth-child(4) {
+            background-image: linear-gradient(to right,
+            yellow 0%,
+            red 40%,
+            green 70%,
+            blue 100%);
+
+        }
+
+        /* 颜色之间，出现突变 */
+        div:nth-child(5) {
+            background-image: linear-gradient(45deg,
+            yellow 0%,
+            yellow 25%,
+            blue 25%,
+            blue 50%,
+            red 50%,
+            red 75%,
+            green 75%,
+            green 100%
+            );
+        }
+
+        div:nth-child(6) {
+            background-image: linear-gradient(to right,
+            #000 0%,
+            #000 25%,
+            #fff 25%,
+            #fff 50%,
+            #000 50%,
+            #000 75%,
+            #fff 75%,
+            #fff 100%
+            );
+
+        }
+
+    </style>
+</head>
+<body>
+<div></div>
+<div></div>
+<div></div>
+</body>
+</html>
+```
