diff --git a/blog/php-mysql/index.md b/blog/php-mysql/index.md
index 83c961b66951631962dd22ae0840ed37a9a1a878..881ebb3ede47d5170b3b5fdcaacd2032d2549ac2 100644
--- a/blog/php-mysql/index.md
+++ b/blog/php-mysql/index.md
@@ -59,3 +59,5 @@
 [变量 variables](blog/php-mysql/sql-variables.md)
 
 [流程结构 if while](blog/php-mysql/sql-if-while.md)
+
+[函数 function](blog/php-mysql/sql-function.md)
diff --git a/blog/php-mysql/sql-function.md b/blog/php-mysql/sql-function.md
new file mode 100644
index 0000000000000000000000000000000000000000..f02c032a1de0d275a3e33f509f27176721ec89c7
--- /dev/null
+++ b/blog/php-mysql/sql-function.md
@@ -0,0 +1,287 @@
+# 函数 function
+
+函数分为两类：系统函数和自定义函数
+
+使用函数
+
+```sql
+select 函数名(参数列表);
+```
+
+## 1、内置函数
+
+### 1.1、字符串函数
+
+函数名 | 说明
+- | - 
+char_length | 判断字符串的字符数
+length  | 判断字符串的字节数,与字符集有关
+concat | 连接字符串
+insrt  |  检查字符是否在目标字符串中，存在返回其位置，不存在返回 0
+lcase | 全部小写
+left   | 左侧开始截取字符串，直到指定位置
+ltrim |  消除左边的空格
+mid  |  从中间指定位置开始截取，如果不指定截取长度，直接到最后
+
+示例
+
+```sql
+select char_length('你好中国'); // 4
+select length('你好中国'); // 12
+select length('hello'); // 5
+select char_length('hello'); // 5
+
+select concat('你好', '中国'); // 你好中国
+
+-- 下标从 1 开始
+select instr('你好中国', '中国'); // 3
+select instr('你好中国', '我'); // 0
+
+select lcase('aBcd'); // abcd
+select left('aBcd', 2); // aB
+
+select ltrim(' abc d '); // abc d
+select mid('你好中国', 3); // 中国
+```
+
+### 1.2、时间函数
+
+函数名 | 说明
+- | - 
+now() | 返回当前时间，日期 时间
+curdate()  | 当前日期
+curtime()  | 当前时间
+datediff()  | 判断两个日期之间的天数之差，日期使用字符串格式（用引号）
+date_add(日期, interval 时间数字 type)  | 时间增加（type: day hour minute second）
+unix_timestamp()  | 获取时间戳
+from_unixtime()  | 将指定时间戳转换成对应的日期时间格式
+
+示例
+
+```sql
+select now(); // 2022-04-10 22:05:38
+select curdate(); // 2022-04-10
+select curtime(); // 22:05:51
+
+select datediff('2022-01-09', '2022-01-01'); // 8
+
+select date_add('2000-10-01', interval 10 day); // 2000-10-11
+
+select unix_timestamp(); // 1649599799
+
+select from_unixtime(1649599799); // 2022-04-10 22:09:59
+```
+
+### 1.3、数学函数
+
+函数名 | 说明
+- | - 
+abs | 绝对值
+ceiling | 向上取整
+floor | 向下取整
+pow | 指数
+rand | 随机数(0-1)
+round | 四舍五入
+
+示例
+
+```sql
+select abs(-1); // 1
+select ceiling(1.1); // 2
+select floor(1.9); // 1
+select pow(2, 4); // 16
+select rand(); // 0.2616088308967732
+select round(1.5); // 2
+```
+
+### 1.4、其他函数
+
+函数名 | 说明
+- | - 
+md5() | MD5
+version()  | 版本号
+database() | 显示当前所在数据库
+uuid()  | 生成一个唯一标识符,全局唯一
+
+示例
+
+```sql
+select md5('abc'); // 900150983cd24fb0d6963f7d28e17f72
+select version(); // 8.0.16
+select database(); // mydatabase
+select uuid(); // c44a06a2-b8d8-11ec-a53c-504259f9d746
+```
+
+## 2、自定义函数
+
+mysql一旦见到分号结束符，就会开始执行
+
+修改语句结束符
+
+基本语法
+
+```sql
+delimiter 符号;
+```
+
+### 2.1、创建函数
+
+基本语法
+
+```sql
+-- 修改语句结束符
+delimiter $$;
+
+create function 函数名(形参) returns 返回值类型
+begin
+    // 函数体
+    return 返回值数据;
+end
+
+语句结束符
+
+-- 将语句结束符修改回来
+delimiter ;
+```
+
+示例
+
+```sql
+-- 修改语句结束符
+delimiter $$
+
+create function my_func1() returns int
+begin
+    return 10;
+end
+
+-- 结束
+$$
+
+-- 将语句结束符改回来
+delimiter ;
+```
+
+如果只有一条语句，可以省略begin 和 end
+
+```sql
+-- 最简单的函数
+create function foo() returns int
+return 10;
+```
+
+为函数的形参指定数据类型
+
+基本语法
+
+```sql
+形参 数据类型
+```
+
+示例
+
+```sql
+create function my_func2(a int, b int) returns int
+return a * b;
+```
+
+### 2.2、查看函数
+
+基本语法
+
+```sql
+show function status [like 'pattern'];
+```
+
+示例
+
+```sql
+-- 查看所有函数
+show function status\G
+
+-- 查看单个函数
+mysql> show function status like 'foo'\G
+*************************** 1. row ***************************
+                  Db: mydatabase
+                Name: foo
+                Type: FUNCTION
+             Definer: root@localhost
+            Modified: 2022-04-10 22:34:06
+             Created: 2022-04-10 22:34:06
+       Security_type: DEFINER
+             Comment:
+character_set_client: utf8mb4
+collation_connection: utf8mb4_general_ci
+  Database Collation: utf8mb4_general_ci
+1 row in set (0.00 sec)
+
+
+-- 查看函数创建语句
+mysql> show create function foo\G
+*************************** 1. row ***************************
+            Function: foo
+            sql_mode: ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION
+     Create Function: CREATE DEFINER=`root`@`localhost` FUNCTION `foo`() RETURNS int(11)
+return 10
+character_set_client: utf8mb4
+collation_connection: utf8mb4_general_ci
+  Database Collation: utf8mb4_general_ci
+1 row in set (0.01 sec)
+```
+
+### 2.3、调用函数
+
+基本语法
+
+```sql
+select 函数名(实参列表);
+```
+
+示例
+
+```sql
+mysql> select foo();
++-------+
+| foo() |
++-------+
+|    10 |
++-------+
+
+mysql> select my_func2(2, 3);
++----------------+
+| my_func2(2, 3) |
++----------------+
+|              6 |
++----------------+
+```
+
+### 2.4、删除函数
+
+基本语法
+
+```sql
+drop function 函数名;
+```
+
+示例
+
+```sql
+drop function my_func1;
+```
+
+### 2.5、注意事项
+
+1. 自定义函数属于用户级别，只有当前客户端对应的数据库中可以使用
+
+2. 可以在不同数据库下看到函数，但是不可以调用
+
+3. 自定义函数通常是为了将多行代码集合到一起解决一个重复性的问题
+
+4.函数必须规范返回值，那么在函数内部不能使用select指令，select一旦执行就会的到一个结果集 result set;
+
+可以使用给变量赋值语句
+```sql
+select 字段 into @变量;
+```
+
+https://www.bilibili.com/video/BV1Vx411g7uJ?p=70&spm_id_from=pageDriver
diff --git a/doc/css.md b/doc/css.md
index 43ad429fa11fd53c6c039ff7e0a74be5b01ae44e..e034aae9ffa15707d413a422c97d178023ce510b 100644
--- a/doc/css.md
+++ b/doc/css.md
@@ -35,4 +35,77 @@
 
 [CSS Tools: Reset CSS](https://meyerweb.com/eric/tools/css/reset/)
 
-[normalize.css](https://github.com/necolas/normalize.css/)
\ No newline at end of file
+[normalize.css](https://github.com/necolas/normalize.css/)
+
+游戏地址：
+
+1. Flexbox froggy
+
+https://flexboxfroggy.com/
+
+2. Flexbox defense
+
+http://www.flexboxdefense.com/
+
+3. Knights of the Flexbox Table
+
+地址：https://knightsoftheflexboxtable.com/
+
+4. Flex Box adventure
+
+地址：https://codingfantasy.com/games/flexboxadventure/play
+
+5. Flexbox zombies
+
+地址：https://mastery.games/flexboxzombies/
+
+6. Grid garden
+
+地址：https://cssgridgarden.com/
+
+7. Grid attack
+
+地址：https://codingfantasy.com/games/css-grid-attack/play
+
+8. CSS Diner
+
+地址：https://flukeout.github.io/
+
+9. Guess CSS
+
+地址：https://www.guess-css.app/
+
+10. CSS Speedrun
+
+地址：https://css-speedrun.netlify.app/
+
+
+CSS 参考书https://cssreference.io/animations/
+
+CSS 灵感https://chokcoco.github.io/CSS-Inspiration/#/
+
+UI 设计师的灵感源泉https://www.awwwards.com/sites/zero-impact
+
+学习 CSS 布局https://zh.learnlayout.com/box-sizing.html
+
+CSS 小花招UI 设计师的灵感源泉https://www.awwwards.com/sites/zero-impact
+
+https://css-tricks.com/
+
+不过脑子的动效，不过看起来很“猛”https://tholman.com/obnoxious/
+
+CSS 三维变换动画https://animista.net/
+
+CSS 鼠标悬浮动画https://ianlunn.github.io/Hover/
+
+通过给萝卜浇水，学习 CSS 网格布局https://cssgridgarden.com/
+
+通过做饭，练习 CSS 选择器https://flexboxfroggy.com/
+
+配色https://mycolor.space/
+
+还是配色https://clrs.cc/
+
+CSS 渐变色https://cssgradient.io/
+
+https://vue3js.cn/interview/
\ No newline at end of file