diff --git "a/\351\230\231\346\263\263\347\217\215/20241025(CSS3\345\261\236\346\200\247).md" "b/\351\230\231\346\263\263\347\217\215/20241025(CSS3\345\261\236\346\200\247).md"
new file mode 100644
index 0000000000000000000000000000000000000000..3251420f0d4ceaff2181cc9a0335669b2298fd9a
--- /dev/null
+++ "b/\351\230\231\346\263\263\347\217\215/20241025(CSS3\345\261\236\346\200\247).md"
@@ -0,0 +1,319 @@
+# CSS3属性
+## 文本
+text-shadow:设置文本的阴影
+eg:
+```
+text-shadow: 20px 27px 22px pink;
+```
+**参数解释：水平位移 垂直位移 模糊程度 阴影颜色。**
+
+
+
+## 盒模型中的 box-sizing 属性
+>属性值可以是: content-box , border-box。
+
+**外加模式：**（css的默认方式）
+```javascript
+	box-sizing: content-box;
+```
+盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
+
+
+**内减模式：**【需要注意】
+```javascript
+	box-sizing: border-box;
+```
+`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
+
+
+## 处理兼容性问题：私有前缀
+>可以**为浏览器添加不同的私有前缀**，属性就可以生效
+eg:
+```
+    -webkit-: 谷歌 苹果
+    -moz-:火狐
+    -ms-：IE
+    -o-：欧朋
+```
+
+
+
+
+## 边框
+>**边框圆角**和**边框阴影**这两个属性，应用十分广泛,兼容性较好
+
+
+### 边框圆角：`border-radius` 属性
+>圆有**水平半径**和**垂直半径**
+
+单个属性的写法：
+```
+    border-top-left-radius: 60px 120px;        //参数解释：水平半径   垂直半径
+
+	border-top-right-radius: 60px 120px;
+
+	border-bottom-left-radius: 60px 120px;
+
+	border-bottom-right-radius: 60px 120px;
+
+```
+
+复合写法：：
+```
+    border-radius: 60px/120px;             //参数：水平半径/垂直半径
+
+	border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
+
+	border-radius: 20px 60px;
+```
+
+
+最简洁的写法：（四个角的半径都相同时）:
+```
+	border-radius: 60px;
+```
+
+
+### 边框阴影：`box-shadow` 属性
+eg:
+```
+    box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
+	box-shadow: 15px 21px 48px -2px #666;
+```
+
+**参数解释：**
+- 水平偏移：正值向右 负值向左。
+- 垂直偏移：正值向下 负值向上。
+- 模糊程度：不能为负值。
+
+
+### 边框图片
+综合属性eg:
+```
+   border-image: url("images/border.png") 27/20px round;
+```
+
+
+
+##  过渡：transition
+**综合属性**：
+```javascript
+	transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+	transition: all 3s linear 0s;
+```
+
+
+
+## 2D转换
+>可以实现元素的**位移、旋转、变形、缩放**，甚至支持矩阵方式。
+
+
+### 1、缩放：`scale`
+eg：
+```javascript
+	transform: scale(x, y);
+	transform: scale(2, 0.5);
+```
+
+**参数解释：**
+- x：表示水平方向的缩放倍数。
+- y：表示垂直方向的缩放倍数。
+- 如果只写一个值就是等比例缩放。取值：大于1表示放大，小于1表示缩小。不能为百分比。
+
+
+
+
+### 2、位移：translate
+eg：
+```javascript
+	transform: translate(水平位移, 垂直位移);
+	transform: translate(-50%, -50%);
+```
+
+**参数解释：**
+- 参数为百分比，相对于自身移动。
+- 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
+
+
+
+### 3、旋转：rotate
+eg：
+```javascript
+	transform: rotate(角度);
+	transform: rotate(45deg);
+```
+
+**参数解释：**正值 顺时针；负值：逆时针。
+
+
+
+# 课后作业
+![小米商品效果图](./rendering/1小米.gif)
+1.小米商品代码
+```
+body{
+            margin: 0;
+            padding: 0;
+            background: white;
+            
+        }
+        .container{
+            width: 900px;
+            height: 900px;
+            padding-left: 20px;
+            margin: 80px auto;
+        }
+        .item{
+            width: 270px;
+            height: 360px;
+            text-align: center;
+            float: left;
+            position: relative;
+            overflow: hidden;
+            margin-left: 20px;
+            top: 0;
+            background-color: #fff;
+            transition: all .5s;
+            box-shadow: 0 0 15px gray;
+        }
+        .item img{
+            margin-top: 40px;
+        }
+        .item:hover{
+            top: -5px;
+            box-shadow: 0 0 15pxg gray;
+        }
+        .item .dd{
+            width: 100%;
+            height: 80px;
+            background-color: orange;
+            position: absolute;
+            left: 0;
+            bottom: -80px;
+            transition: all .5s;
+        }
+        .item:hover .dd{
+            bottom: 0;
+        }
+```
+
+![遥遥领先效果图](./rendering/2遥遥领先.gif)
+2.遥遥领先代码
+```
+ div{
+            width: 160px;
+            height: 160px;
+            font-size: 37px;
+            color:white;
+            background-color: red;
+            text-align: center;
+            margin: 90px auto;
+            transition: all 1.8s;
+            margin-top: 40px;
+        }
+        div:hover{
+            transform: rotate(-395deg);
+        }
+         .horizontal{
+            margin-top: 50px;
+        }
+```
+
+![小火煎效果图](./rendering/3小火箭.gif)
+3.小火箭代码
+```
+html,body{
+            height: 100%;
+        }
+        body{
+            background-color: orange;
+        }
+        img{
+            height: 120px;
+            left: 110px;
+            top: 580px;
+            position: absolute;
+            transform:translate(-200px ,200px) rotate(45deg);
+            transition: all 1s ease-in;
+        }
+        body:hover img{
+            transform:translate(500px, -500px) rotate(45deg);
+        }
+```
+
+![扑克牌效果图](./rendering/4pj纸牌.gif)
+4.扑克牌代码
+```
+ .container {
+            width: 600px;
+            height: 500px;
+            margin: 100px auto;
+            position: relative;
+        }
+
+        img {
+            height: 420px;
+            width: 320px;
+            left: 150px;
+            top: 100px; 
+            position: absolute;
+            /* 转换中心点 transform-origin: 水平方向 垂直方向; */
+            transform-origin: center bottom;          
+            transition: all 1s ease-in-out 0s;
+            /* 阴影程度 */
+            box-shadow: 0px 0px 5px gray;
+        }
+
+        .container:hover img:nth-child(1) {
+            transform: rotate(-60deg);
+        }
+
+        .container:hover img:nth-child(2) {
+            transform: rotate(-50deg);
+        }
+
+        .container:hover img:nth-child(3) {
+            transform: rotate(-40deg);
+        }
+
+        .container:hover img:nth-child(4) {
+            transform: rotate(-30deg);
+        }
+
+        .container:hover img:nth-child(5) {
+            transform: rotate(-20deg);
+        }
+
+        .container:hover img:nth-child(6) {
+            transform: rotate(-10deg);
+        }
+
+        .container:hover img:nth-child(7) {
+            transform: rotate(0deg);
+        }
+
+        .container:hover img:nth-child(8) {
+            transform: rotate(10deg);
+        }
+
+        .container:hover img:nth-child(9) {
+            transform: rotate(20deg);
+        }
+
+        .container:hover img:nth-child(10) {
+            transform: rotate(30deg);
+        }
+
+        .container:hover img:nth-child(11) {
+            transform: rotate(40deg);
+        }
+
+        .container:hover img:nth-child(12) {
+            transform: rotate(50deg);
+        }
+
+        .container:hover img:nth-child(13) {
+            transform: rotate(60deg);
+        }
+```
+
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/1\345\260\217\347\261\263.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/1\345\260\217\347\261\263.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..45d33161f19717c184f960b8ae183171b1bce85d
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/1\345\260\217\347\261\263.gif" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/2\351\201\245\351\201\245\351\242\206\345\205\210.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/2\351\201\245\351\201\245\351\242\206\345\205\210.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..1f03881575f2fba8dac9a74e066cdf9c1f339921
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/2\351\201\245\351\201\245\351\242\206\345\205\210.gif" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/3\345\260\217\347\201\253\347\256\255.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/3\345\260\217\347\201\253\347\256\255.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..f13e89a41860ba6b125611691a74996e8f7787af
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/3\345\260\217\347\201\253\347\256\255.gif" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/4pj\347\272\270\347\211\214.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/4pj\347\272\270\347\211\214.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..d0bc1aafa224109cccbd01bbce2bb831b0de0154
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/4pj\347\272\270\347\211\214.gif" differ