diff --git "a/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.html" "b/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.html"
index 1c54365baf721d0ff787f528333674f6be2d7d55..e9395221d2cdf8a60d97df10f847f0ce6be9c99e 100644
--- "a/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.html"
+++ "b/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.html"
@@ -4,6 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
+        
         .box
         {
             width: 200px;
@@ -14,32 +15,35 @@
         .image-background
         {
             width: 200px;
-            height: 200px;
+            height: 150px;
+            background-repeat: no-repeat;
             background-image: url(../照骗/0930-1.png);
         }
         .cover-image
         {
             background-image: url(../照骗/0930-3.png);
             background-size: cover;
-            width: 200px;
+            width: 250px;
             height: 200px;
         }
    
         .header
         {
             background-image: url(../照骗/0930-1.png);
-            height: 100px;
-            width: 200px;
-            background-repeat: no-repeat;
-            background-position: right bottom;
-            border: 1px solid gray;
+            height: 300px;
+            width: 150px;
+            margin-bottom: 20px;
+            background-position:right bottom ;
+            
             
 
         }
         .pattern
         {
-            width: 100%; /* 设置元素的宽度 */
-            height: 300px; /* 设置元素的高度 */
+            width: 300px; /* 设置元素的宽度 */
+            height: 200px; /* 设置元素的高度 */
+            background-size: 50%;
+            margin: 20px;
           background-image: url(../照骗/0930-3.png); /* 设置背景图片 */
           background-repeat: repeat-y; /* 在垂直方向上重复图片 */
           
@@ -49,19 +53,14 @@
 
 
 <div class="box">
-    请为一个名为.box的类设置背景颜色为深蓝色。
 </div>
 <div  class="image-background">
-    给定一个名为.image-background的类，请设置其背景图片
 </div>
 <div class="cover-image">
-    请为一个名为.cover-image的类设置背景图片，并确保图片覆盖整个元素。
 </div>
 <div class="hearer">
-    请为一个名为.header的类设置背景图片，并将其定位到元素的右下角。
 </div>
 <div class="pattern">
-    请为一个名为.pattern的类设置背景图片，并确保图片在垂直方向上重复。 
 </div>
 
 
diff --git "a/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-1009-\346\270\220\345\217\230\347\273\203\344\271\240.html" "b/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-1009-\346\270\220\345\217\230\347\273\203\344\271\240.html"
new file mode 100644
index 0000000000000000000000000000000000000000..07854100710b441202fa75b27e52cde9b848293d
--- /dev/null
+++ "b/\350\202\226\347\277\224/\344\275\234\344\270\232/2024-1009-\346\270\220\345\217\230\347\273\203\344\271\240.html"
@@ -0,0 +1,80 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+    
+        div
+        {
+            width: 400px;
+            height: 250px;
+            border: 1px solid;
+            margin-bottom: 10px;
+        }
+        .d1
+        {
+            width: 400px;
+            height: 100px;
+            background-image: linear-gradient(60deg , yellow 0% , yellow 25% , blue 25% , blue 50% , red 50% , red 75% , green 75% ,green 100% );
+          
+            
+        }
+        .d2
+        {
+
+            width: 400px;
+            height: 100px;
+            border: 1px solid;
+            margin-top: 10px;
+            background-image:repeating-linear-gradient(to right , black 0% , black 25% , white 25% ,white 50%)
+           
+          
+        }
+        .d3
+        {
+            width: 400px;
+            height:200px;
+        
+        }
+        p
+        {
+            font-size: 50px;
+            background-image: linear-gradient(60deg , orange 0% , orange 30% ,blue 30%, blue 60% , red 60%, red 100% );
+             -webkit-background-clip :text;
+             -webkit-text-fill-color:transparent;
+
+        }
+       
+        .d41{
+            height: 20px;
+            background-image: repeating-linear-gradient(to right , red 0% ,red 5%, pink 5%, pink 10%);
+        }
+        .d42{
+            height: 20px;
+            background-image: repeating-linear-gradient(to right , pink 0% ,pink 5%, white 5%, white 10%);
+        }
+    </style>
+</head>
+<body>
+    <div class="d1"></div>
+    <div class="d2"></div>
+    <div clsse="d3"><p>中华人民共和国</p></div>
+     
+   
+    <div class="d4">
+          <!-- <div class="d41"></div>
+        <div class="d42"></div> -->
+       <script>
+        for (let i = 0; i < 7; i++) {
+            document.write(`
+            <div class="d41"></div>
+            <div class="d42"></div>
+           `)
+        }
+       
+       </script>
+    </div>
+  
+</body>
+</html>
\ No newline at end of file
diff --git "a/\350\202\226\347\277\224/\347\205\247\351\252\227/\346\270\220\345\217\230.png" "b/\350\202\226\347\277\224/\347\205\247\351\252\227/\346\270\220\345\217\230.png"
new file mode 100644
index 0000000000000000000000000000000000000000..68f3f45823f40e2950d9fa021032c19365160f87
Binary files /dev/null and "b/\350\202\226\347\277\224/\347\205\247\351\252\227/\346\270\220\345\217\230.png" differ
diff --git "a/\350\202\226\347\277\224/\347\205\247\351\252\227/\350\203\214\346\231\257\345\261\236\346\200\247.png" "b/\350\202\226\347\277\224/\347\205\247\351\252\227/\350\203\214\346\231\257\345\261\236\346\200\247.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4e9631b91843accf7882fb31eaadf4d683c68364
Binary files /dev/null and "b/\350\202\226\347\277\224/\347\205\247\351\252\227/\350\203\214\346\231\257\345\261\236\346\200\247.png" differ
diff --git "a/\350\202\226\347\277\224/\347\205\247\351\252\227/\350\203\214\346\231\257\346\225\210\346\236\234.png" "b/\350\202\226\347\277\224/\347\205\247\351\252\227/\350\203\214\346\231\257\346\225\210\346\236\234.png"
deleted file mode 100644
index 9403eea7258640f175e6de56890fcd26f0dd3915..0000000000000000000000000000000000000000
Binary files "a/\350\202\226\347\277\224/\347\205\247\351\252\227/\350\203\214\346\231\257\346\225\210\346\236\234.png" and /dev/null differ
diff --git "a/\350\202\226\347\277\224/\347\254\224\350\256\260/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\350\202\226\347\277\224/\347\254\224\350\256\260/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.md"
index 678a68e5a2f5041153ea72d9b7ad4b4df63ffe9b..15302fbe21acdda7781e9b1443025f9a2a0ff3aa 100644
--- "a/\350\202\226\347\277\224/\347\254\224\350\256\260/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.md"
+++ "b/\350\202\226\347\277\224/\347\254\224\350\256\260/2024-0930-\350\203\214\346\231\257\345\261\236\346\200\247.md"
@@ -56,11 +56,13 @@
 
 - `A` 透明度，取值范围 0~1。
 ## 背景属性效果及主要代码
-![background](../照骗/背景效果.png)
+![background](../照骗/背景属性.png)
 ```
 html
 
- .box
+   <style>
+        
+        .box
         {
             width: 200px;
             height: 200px;
@@ -70,32 +72,35 @@ html
         .image-background
         {
             width: 200px;
-            height: 200px;
+            height: 150px;
+            background-repeat: no-repeat;
             background-image: url(../照骗/0930-1.png);
         }
         .cover-image
         {
             background-image: url(../照骗/0930-3.png);
             background-size: cover;
-            width: 200px;
+            width: 250px;
             height: 200px;
         }
    
         .header
         {
             background-image: url(../照骗/0930-1.png);
-            height: 100px;
-            width: 200px;
-            background-repeat: no-repeat;
-            background-position: right bottom;
-            border: 1px solid gray;
+            height: 300px;
+            width: 150px;
+            margin-bottom: 20px;
+            background-position:right bottom ;
+            
             
 
         }
         .pattern
         {
-            width: 100%; /* 设置元素的宽度 */
-            height: 300px; /* 设置元素的高度 */
+            width: 300px; /* 设置元素的宽度 */
+            height: 200px; /* 设置元素的高度 */
+            background-size: 50%;
+            margin: 20px;
           background-image: url(../照骗/0930-3.png); /* 设置背景图片 */
           background-repeat: repeat-y; /* 在垂直方向上重复图片 */
           
@@ -105,19 +110,15 @@ html
 
 
 <div class="box">
-    请为一个名为.box的类设置背景颜色为深蓝色。
 </div>
 <div  class="image-background">
-    给定一个名为.image-background的类，请设置其背景图片
 </div>
 <div class="cover-image">
-    请为一个名为.cover-image的类设置背景图片，并确保图片覆盖整个元素。
 </div>
 <div class="hearer">
-    请为一个名为.header的类设置背景图片，并将其定位到元素的右下角。
 </div>
 <div class="pattern">
-    请为一个名为.pattern的类设置背景图片，并确保图片在垂直方向上重复。 
 </div>
+
 ```
 
diff --git "a/\350\202\226\347\277\224/\347\254\224\350\256\260/2024-1009-\346\270\220\345\217\230.md" "b/\350\202\226\347\277\224/\347\254\224\350\256\260/2024-1009-\346\270\220\345\217\230.md"
new file mode 100644
index 0000000000000000000000000000000000000000..dd01d1f5fd740782beb5467491b7aa0279830ed9
--- /dev/null
+++ "b/\350\202\226\347\277\224/\347\254\224\350\256\260/2024-1009-\346\270\220\345\217\230.md"
@@ -0,0 +1,111 @@
+## 渐变
+### 线性渐变
++ 格式：
+```
+background-image: linear-gradient(方向，起始颜色，终止颜色);
+background-image: linear-gradient(to right，yellow，green);
+```
+ + 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。不写方向，表示默认的方向是：从上往下
+ + 方向也可以是角度：单位`deg`
+ + 方向也可为百分比：例如：0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 
+
+### 径向渐变
++ 格式：
+```
+	background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
+
+	background-image: radial-gradient(100px at center,yellow ,green);
+
+```
++ 中心点的位置可以是：at  left  right  center bottom  top。如果以像素为单位，则中心点参照的是盒子的左上角。
++ 如果辐射半径的宽高不同，那就是椭圆
+例如：
+```
+ background-image: radial-gradient(100px 50px at center, yellow, green);
+
+```
+## 渐变效果及主要代码
+![渐变](../照骗/渐变.png)
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+    
+        div
+        {
+            width: 400px;
+            height: 250px;
+            border: 1px solid;
+            margin-bottom: 10px;
+        }
+        .d1
+        {
+            width: 400px;
+            height: 100px;
+            background-image: linear-gradient(60deg , yellow 0% , yellow 25% , blue 25% , blue 50% , red 50% , red 75% , green 75% ,green 100% );
+          
+            
+        }
+        .d2
+        {
+
+            width: 400px;
+            height: 100px;
+            border: 1px solid;
+            margin-top: 10px;
+            background-image:repeating-linear-gradient(to right , black 0% , black 25% , white 25% ,white 50%)
+           
+          
+        }
+        .d3
+        {
+            width: 400px;
+            height:200px;
+        
+        }
+        p
+        {
+            font-size: 50px;
+            background-image: linear-gradient(60deg , orange 0% , orange 30% ,blue 30%, blue 60% , red 60%, red 100% );
+             -webkit-background-clip :text;
+             -webkit-text-fill-color:transparent;
+
+        }
+       
+        .d41{
+            height: 20px;
+            background-image: repeating-linear-gradient(to right , red 0% ,red 5%, pink 5%, pink 10%);
+        }
+        .d42{
+            height: 20px;
+            background-image: repeating-linear-gradient(to right , pink 0% ,pink 5%, white 5%, white 10%);
+        }
+    </style>
+</head>
+<body>
+    <div class="d1"></div>
+    <div class="d2"></div>
+    <div clsse="d3"><p>中华人民共和国</p></div>
+     
+   
+    <div class="d4">
+          <!-- <div class="d41"></div>
+        <div class="d42"></div> -->
+       <script>
+        for (let i = 0; i < 7; i++) {
+            document.write(`
+            <div class="d41"></div>
+            <div class="d42"></div>
+           `)
+        }
+       
+       </script>
+    </div>
+  
+</body>
+</html>
+```
+
