diff --git "a/\347\250\213\346\242\246/20241025_css3\345\261\236\346\200\247&\350\277\207\346\270\241&2D\350\275\254\346\215\242.md" "b/\347\250\213\346\242\246/20241025_css3\345\261\236\346\200\247&\350\277\207\346\270\241&2D\350\275\254\346\215\242.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f8c161415e98580adb8e8ffa51bc1a49eba6bb5b
--- /dev/null
+++ "b/\347\250\213\346\242\246/20241025_css3\345\261\236\346\200\247&\350\277\207\346\270\241&2D\350\275\254\346\215\242.md"
@@ -0,0 +1,285 @@
+# 文本
+## 设置文本的阴影
++ `text-shadow:水平位移 垂直位移 模糊程度 阴影颜色`
++ 可以设置多个阴影，每个阴影之间用逗号隔开；`实现凹凸文字效果`
+# 盒模型中的`box-sizing`属性
+* 指定盒子宽度和高度的计算方式
+* 属性值：`content-box`、`border-box`
+1. **外加模式：**（css的默认方式）
+```javascript
+ box-sizing: content-box;
+```
+> 解释：此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
+2. **内减模式：**【需要注意】
+```javascript
+ box-sizing: border-box;
+```
+> 解释：此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变
+# 边框
+## 边框圆角：`border-radius` 属性
+```
+border-radius=水平半径 垂直半径
+```
+## 边框阴影：`box-shadow` 属性
+```
+box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 外/内阴影(inset)
+```
+- 水平偏移：正值向右 负值向左
+- 垂直偏移：正值向下 负值向上
+- 模糊程度：不能为负值
+## 边框图片
+1. 边框图片的路径`border-image-source: url(" ");`
+2. 图片边框的裁剪`border-image-slice: 27;`
+3. 图片边框的宽度`border-image-width: 27px;`
+4. 边框图片的平铺`border-image-repeat: stretch;`
+ * `repeat`:正常平铺 但是可能会显示不完整
+ * `round`: 平铺 但是保证 图片完整
+ * `stretch`: 拉伸显示
+> 综合属性：`border-image: url(" ") 27/20px round;`
+# 过度`transition`
++ 实现元素不同状态间的平滑过渡，用来制作动画效果【补间动画】
++ 属性
+ - `transition-property: all;` 让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡 (all,width,height)
+ - `transition-duration: 1s;` 过渡的持续时间
+ - `transition-timing-function: linear;` 运动曲线。属性值可以是：
+ * `linear` 线性
+ * `ease` 减速
+ * `ease-in` 加速
+ * `ease-out` 减速
+ * `ease-in-out` 先加速后减速
+ - `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画
+> 综合属性：`transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;`
+# 2D转换`transform`
++ 实现**位移、旋转、变形、缩放**
+1. 缩放`scale`
+```js
+transform: scale(x, y);
+transform: scale(2, 0.5);
+```
+> x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数
+> 只写一个值就是等比例缩放
+> 取值：大于1表示放大，小于1表示缩小。不能为百分比
+2. 位移`translate`
+```js
+transform: translate(水平位移, 垂直位移);
+transform: translate(-50%, -50%);
+```
+> 参数为百分比，相对于自身移动
+> 只写一个值，则表示水平移动
+> 正值：向右和向下;负值：向左和向上
+**让绝对定位中的盒子在父亲里居中**
+> 标准流中的盒子在父亲里居中（水平方向看），可以将其设置`margin: 0 auto`属性
+> 盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间）应该如下两种方式：
++ 用绝对定位`position: absolute;`来设置方向
+```js
+ div {
+ width: 600px;
+ height: 60px;
+ position: absolute; 绝对定位的盒子
+ left: 50%; 首先，让左边线居中
+ top: 0;
+ margin-left: -300px; 然后，向左移动宽度（600px）的一半
+ }
+```
+***宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了***
++ 用偏移`translate`
+```js
+div {
+ width: 600px;
+ height: 60px;
+ background-color: red;
+ position: absolute; 绝对定位的盒子
+ left: 50%; 首先，让左边线居中
+ top: 0;
+ transform: translate(-50%); 然后，利用translate，往左走自己宽度的一半【推荐写法】
+ }
+```
+***绝对定位的盒子，让左边线居中,然后利用translate，往左走自己宽度的一半***
+3. 旋转`rotate`
+```js
+transform: rotate(角度);
+transform: rotate(45deg);
+```
+> 正值 顺时针；负值：逆时针
+> 盒子设置了 transform 中的 rotate 旋转，但同时还要给盒子设置 transition 过渡
+> 没有这行过渡的代码，旋转会直接一步到位
+**改变旋转的坐标原点**`transform-origin`属性
+```js
+ transform-origin: 水平坐标 垂直坐标;
+ transform-origin: 50px 50px;
+ transform-origin: center bottom; //旋转时，以盒子底部的中心为坐标原点
+```
+# lesson18-任务
+> 二十七、过度，2D转换
+## [过度，2D转换显示效果]
+
+1. 手环、电视机、手机
+```html
+
+```
+```css
+
+```
+2. 旋转
+```html
+ 遥遥领先
+```
+```css
+
+```
+3. 小火箭
+```html
+
+
+
+ 
+
+ 
+
+ 
+ 
+