diff --git "a/\351\231\210\346\242\246\346\266\265/20241025\351\200\211\346\213\251\345\231\250,\345\261\236\346\200\247.md" "b/\351\231\210\346\242\246\346\266\265/20241025\351\200\211\346\213\251\345\231\250,\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..07727fb802fa5aab3fc1193e47e1603797cc057f
--- /dev/null
+++ "b/\351\231\210\346\242\246\346\266\265/20241025\351\200\211\346\213\251\345\231\250,\345\261\236\346\200\247.md"
@@ -0,0 +1,196 @@
+![2D过渡](http://sloruc32g.hn-bkt.clouddn.com/GIF%202024-10-27%2016-35-18.gif?e=1730018481&token=0GjqvMqqimT2t3sunOWYp2T-lZm_vLxO4Bi_rARI:17evS3MFAAA2nB6OdMAjBCzk7Gc=)
+## 补充选择器详解
+### 结构伪类选择器
+伪类选择器的标志性符号是 `:`
+
+***伪类选择器***
+![](http://img.smyhvae.com/20180207_1502.png)
+
+CSS中有一些伪类选择器，比如`:link`、`:visited`、`:hover`、`:active`、`:focus`。
+
+***(1、)格式:***
+
+- `E:first-child` 匹配父元素的第一个子元素E。
+- `E:last-child` 匹配父元素的最后一个子元素E。
+- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**，盒子的编号是从`1`开始算起，不是从`0`开始算起。
+- `E:nth-child(odd)` 匹配奇数
+- `E:nth-child(even)` 匹配偶数
+- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E。
+
+注：
+（1）这里我们要好好理解**父元素**的含义，它指的是：以 E 元素的父元素为参考。
+
+（2）以上选择器中所选到的元素的类型，必须是指定的类型E，如果选不中，则无效。我们可以理解成：**先根据选择器找到选中的全部位置，如果发现某个位置不是类型E，则该位置失效**。
+
+***(2、)格式：***
+
+- `E:first-of-type` 匹配同类型中的第一个同级兄弟元素E。
+
+- `E:last-of-type` 匹配同类型中的最后一个同级兄弟元素E。
+
+- `E:nth-of-type(n)` 匹配同类型中的第n个同级兄弟元素E。
+
+- `E:nth-last-of-type(n)` 匹配同类型中的倒数第n个同级兄弟元素E。
+
+**3、格式：（第三部分）**
+
+- `E:empty` 匹配没有任何子节点（包括空格等text节点）的元素E。
+
+- `E:target` 匹配相关URL指向的E元素。要配合锚点使用。
+
+### 伪元素选择器
+![](http://img.smyhvae.com/20180207_1503.png)
+伪元素选择器的标志性符号是 `::`。
+
+***(1、)格式：***
+
+- `E::before` 设置在 元素E 前面的内容，配合content属性可以添加内容
+
+- `E::after` 设置在 元素E 后面的内容，配合content属性可以添加内容
+
+- 通过伪元素选择器，就可以添加出类似于span标签的效果，要结合 content 属性
+
+- 通过这两个属性添加的伪元素，是**行内元素**，需要转换成块元素才能设置宽高。
+
+***(2、)格式：***
+
+- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。
+
+- `E::first-line` 设置元素 E 里面的**第一行**的样式。
+
+- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
+
+## 属性
+
+### text-shadow：设置文本的阴影
+
+语法：
+```javascript
+	text-shadow: 20px 27px 22px pink;
+```
+解：水平位移 垂直位移 模糊程度 阴影颜色
+#### 凹凸文字效果
+
+text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开
+
+代码演示：
+
+```css
+        /* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/
+        .aa {
+            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
+        }
+        .bb {
+            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
+        }
+```
+给左上角放黑色的阴影，右下角放白色的阴影，就达到了凹下去的效果
+
+
+### 盒模型中的 box-sizing 属性
+
+**指定盒子宽度和高度的计算方式**
+
+`box-sizing`属性。它的属性值可以是：`content-box`、`border-box`
+
+**外加模式：ontent-box**（css的默认方式）
+
+```javascript
+	box-sizing: content-box;
+```
+解释：此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
+
+**内减模式：border-box**
+```javascript
+	box-sizing: border-box;
+```
+解释：此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
+
+
+### 处理兼容性问题：私有前缀
+
+**私有前缀的举例**：
+
+格式如下：
+```
+    -webkit-: 谷歌 苹果
+    -moz-:火狐
+    -ms-：IE
+    -o-：欧朋
+```
+格式举例如下：
+
+```css
+    background: linear-gradient(left, green, yellow); /* 原本代码，无效果需要添加不同的私有前缀*/
+    background: -webkit-linear-gradient(left, green, yellow);
+    background: -moz-linear-gradient(left, green, yellow);
+    background: -ms-linear-gradient(left, green, yellow);
+    background: -o-linear-gradient(left, green, yellow);
+    background: linear-gradient(left, green, yellow);
+```
+### 边框圆角：`border-radius` 属性
+
+边框的每个圆角，本质上是一个圆，圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等， 就是椭圆
+
+复合写法：
+```css
+	border-radius: 60px/120px;/*参数：水平半径/垂直半径*/
+	border-radius: 20px 60px 100px 140px;  /*从左上开始，顺时针赋值。如果当前角没有值，取对角的值*/
+```
+
+最简洁的写法：（四个角的半径都相同时）
+
+```
+	border-radius: 60px;
+```
+例：
+```css
+        /*画圆形的方式一*/
+        .box:nth-child(1) {
+            border-radius: 50px;
+        }
+
+        /*画圆形的方式二*/
+        .box:nth-child(2) {
+            border-radius: 50%;
+        }
+
+        .box:nth-child(3) {
+            border-radius: 100px 0 0 0;
+        }
+```
+### 边框阴影：`box-shadow` 属性
+语法：
+```javascript
+	box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
+	box-shadow: 15px 21px 48px -2px #666;
+```
+后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影,如：
+```javascript
+	box-shadow:3px 3px 3px 3px #666 inset;
+```
+### 边框图片
+
+边框图片有以下属性：
+
+```javascript
+	/* 边框图片的路径*/
+	border-image-source: url("images/border.png");
+	/* 图片边框的裁剪*/
+	border-image-slice: 27;
+	/*图片边框的宽度*/
+	border-image-width: 27px;
+	/*边框图片的平铺*/
+	/* repeat :正常平铺 但是可能会显示不完整*/
+	/*round: 平铺 但是保证 图片完整*/
+	/*stretch: 拉伸显示*/
+	border-image-repeat: stretch;
+```
+综合属性：
+```javascript
+	 border-image: url("images/border.png") 27/20px round;
+```
+
+
+
+