From bbc3d8ff336395560617f3f03f0282ae12f3884e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E4=BD=99=E5=80=A9?= <819139773@qq.com>
Date: Fri, 25 Oct 2024 21:20:40 +0800
Subject: [PATCH] =?UTF-8?q?20241025=E8=BF=87=E6=B8=A1+=E8=BD=AC=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...7\346\270\241+\350\275\254\346\215\242.md" | 480 ++++++++++++++++++
1 file changed, 480 insertions(+)
create mode 100644 "\346\236\227\344\275\231\345\200\251/20241025\350\277\207\346\270\241+\350\275\254\346\215\242.md"
diff --git "a/\346\236\227\344\275\231\345\200\251/20241025\350\277\207\346\270\241+\350\275\254\346\215\242.md" "b/\346\236\227\344\275\231\345\200\251/20241025\350\277\207\346\270\241+\350\275\254\346\215\242.md"
new file mode 100644
index 0000000..17327a3
--- /dev/null
+++ "b/\346\236\227\344\275\231\345\200\251/20241025\350\277\207\346\270\241+\350\275\254\346\215\242.md"
@@ -0,0 +1,480 @@
+## 一.笔记
+
+### 1. 伪元素
+```js
+伪元素选择器的标志性符号是 `::`。
+只能在块级元素中显示
+
+1. 格式一
+ ① `E::before` 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+ ② `E::after` 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
+
+ eg:
+ 使用before：
+ //
+ div::before{
+ content="文字"
+ }
+ 使用after：
+ //
+ div::after{
+ content="文字"
+ }
+
+2. 格式二
+ `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。
+
+ `E::first-line` 设置元素 E 里面的**第一行**的样式。
+
+ `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
+
+```
+
+### 2. text-shadow：设置文本阴影
+```js
+格式举例：
+ text-shadow：水平位移 垂直位移 模糊程度 阴影颜色;
+
+实现凹凸文字效果：
+ ```
+ 1. 凸文字效果
+ // 凸
+ .tu{
+ text-shadow：-1px -1px 1px #000,1px 1px 1px #fff;
+ }
+ // 凹
+ .ao{
+ text-shadow：-1px -1px 1px #fff,1px 1px 1px #000;
+ }
+ (实现凹凸文字效果的方式比较简单，给左上角放黑色的阴影，右下角放白色的阴影，就达到了凹下去的效果。)
+ ```
+
+
+```
+
+### 3. box-sizing 属性
+```js
+它的属性值可以是：`content-box`、`border-box`。
+
+外加模式：
+ box-sizing：content-box;
+内减模式：
+ box-sizing：border-box;
+
+解释：此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
+
+```
+
+### 4. 处理兼容性问题：私有前缀
+```js
+处理兼容性问题的常见方法：为属性添加**私有前缀**。
+
+**私有前缀的举例**：
+比如说，我想给指定的div设置下面这样一个属性：
+ background: linear-gradient(left, green, yellow);
+ 上面这个属性的作用是：添加从左到右的线性渐变，颜色从绿色变为黄色。
+此时，我们可以**为浏览器添加不同的私有前缀**，属性就可以生效了。
+格式如下：
+ -webkit-: 谷歌 苹果
+ -moz-:火狐
+ -ms-：IE
+ -o-：欧朋
+ eg: background: -webkit-linear-gradient(left, green, yellow);
+
+```
+
+### 5. 边框圆角：border-radius属性
+```js
+ 1个值：4角都相等
+ eg： border-radius：12px;
+ 2个值：左上右下，右上左下
+ 3个值：左上，右上左下，右下
+ 4个值：左上，右上，右下，左下
+
+效果：
+ //圆形
+ .box1{
+ border-radius:100px;
+ // 或者 border-radius：50%
+ }
+
+ //圆角矩形
+ .box2{
+ border-radius:10%
+ }
+
+ // 上圆，左右直
+ .box3{
+ border-radius:100px/50px
+ }
+
+ // 扇形
+ .box4{
+ border-radius:200px 0 0 0
+ }
+
+ // 马眼
+ .box5{
+ border-radius:0 100px
+ }
+
+```
+
+
+### 6. 边框阴影：box-shadow 属性
+```js
+格式：
+ box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
+ box-shadow: 15px 21px 48px -2px #666;
+
+参数解释：
+ 水平偏移：正值向右 负值向左。
+ 垂直偏移：正值向下 负值向上。
+ 模糊程度：不能为负值。
+
+```
+
+
+### 7. 动画 过渡：transition
+```js
+ 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
+ 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。
+
+transition 包括以下属性：
+- `transition-property: all;` 如果希望所有的属性都发生过渡，就使用all。
+- `transition-duration: 1s;` 过渡的持续时间。
+- `transition-timing-function: linear;` 运动曲线。属性值可以是：
+ - `linear` 线性
+ - `ease` 减速
+ - `ease-in` 加速
+ - `ease-out` 减速
+ - `ease-in-out` 先加速后减速
+- `transition-delay: 1s;` 过渡延迟。多长时间后再执行这个过渡动画。
+上面的四个属性也可以写成**综合属性**：
+ transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
+ transition: all 3s linear 0s;
+
+其中，`transition-property`这个属性是尤其需要注意的，不同的属性值有不同的现象。我们来示范一下。
+ ① 如果设置 `transition-property: width`，意思是只让盒子的宽度在变化时进行过渡。效果如下：
+ ② 如果设置 `transition-property: all`，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡。
+
+```
+
+
+### 8. 2D转换
+```js
+transform 对象的值：
+
+1. 缩放：scale
+ 格式： transform: scale(x, y);
+ transform: scale(2, 0.5);
+ (参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。取值：大于1表示放大，小于1表示缩小。不能为百分比。)
+
+2. 位移：translate
+ 格式： transform：translate(水平位移,垂直位移)
+ transform: translate(-50%, -50%);
+ (参数解释：参数为百分比，相对于自身移动。
+ 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。)
+
+3. 旋转：rotate
+ 格式： transform: rotate(角度);
+ transform: rotate(45deg);
+ (参数解释：正值 顺时针；负值：逆时针。)
+
+```
+
+
+
+
+
+## 二.作业
+### 1. 作业1
+1. 
+2. 代码：
+```html
+
+
+
+
+
+
+
+
+
+```
+
+### 2. 作业2
+1. 
+2. 代码：
+```html
+
+
+
+
+
+
+
+
+```
+
+### 3. 作业3
+1. 
+2. 代码：
+```html
+
+
+
+ 
+
+```
+
+
+
+### 4. 作业4
+1. 
+2. 代码：
+```html
+
+
+
+
+
+```
+
+
+
+### 5. 作业5
+1. 
+2. 代码：
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+