蘇阿細 - CSS3
type: channel
link: https://www.wangchouchou.com/tag/CSS3/
items: BFC
items: 响应式布局
items: 伸缩盒模型
items: 多列布局
items: 动画
items: 过渡
items: 3D变换
items: 2D变换
items: 字体
items: 渐变

BFC
type: item
date: 2024-03-15T13:02:40+00:00
description: 1. BFC演示一 BFC_演示1 2. BFC演示二 BFC_演示2 3. BFC演示三 BFC_演示3

响应式布局
type: item
date: 2024-03-15T13:02:14+00:00
description: 1. 媒体查询—媒体类型 媒体查询_媒体类型 带带大师兄 2. 媒体查询—媒体特性 媒体查询_媒体特性 带带大师兄 3. 媒体查询——运算符 媒体查询_运算符 带带大师兄 4. 媒体查询—常用的阈值 媒体查询_常用的阈值 带带大师兄

伸缩盒模型
type: item
date: 2024-03-15T13:01:54+00:00
description: 1. 伸缩容器、伸缩项目 伸缩容器_伸缩项目 1 2 a b c 2. 主轴方向 主轴方向 1 2 3 3. 主轴换行方式 主轴换行方式 1 2 3 4 5 6 7 8 9 10 11 4. flex-flow flex-flow 1 2 3 4 5 6 7 8 9 10 11 5. 主轴对齐方式 主轴对齐方式 1 2 3 6. 侧轴对齐方式—一行 侧轴对齐方式_一行 1 2 3 7. 侧轴对齐方式—多行 侧轴对齐方式_多行 1 2 3 4 5 6 7 8 9 10 11 8. 元素的水平垂直居中 元素的水平垂直居中 9. 项目在主轴的基准长度 项目在主轴的基准长度 1 2 3 10. 伸缩项目—伸 伸缩项目_伸 1 2 3 11. 伸缩项目—缩 伸缩项目_缩 1 2 3 12. flex复合属性 flex复合属性 1 2 3 13. 项目的排序与单独对齐 项目的排序与单独对齐 1 2 3

多列布局
type: item
date: 2024-03-15T13:01:12+00:00
description: 多列布局案例 《抽象行为艺术大课堂》 【开始】唐僧师徒四人忙着赶路，吃不好、睡不好，走了几天，来到一个景色迷人的万寿山五庄观，见天色不早，就想在五庄观里住上一晚。五庄观里的两个童子听说他们是来自东土大唐要到西天取经的，连忙说∶“我家师父到元始天尊那里讲经去了，让我们在这里等您，请快快进屋。”原来，这童子的师父是镇元子，在五百年前的兰盆会上认识了唐僧前世金蝉子。临走时曾告诉两个童子要好好对待唐僧，并交待童子用观里的两颗宝贝人参果招待他。【结束】 【开始】两人摘了人参果，趁着唐僧的徒弟不在，偷偷拿来给唐僧吃。唐僧看见人参果就好像刚出生的婴儿一样，吓得浑身发抖，使劲摇手不敢吃。两个童子越是解释说∶“这是仙果，不是人！”唐僧仍是不信，让他们赶快端走。两个童子没有办法，只好端着人参果，回到房里。因为那人参果不能久放，否则吃下也不能长寿，于是两童子一人一个，分着吃了。说来也巧，这间房子正好和厨房挨着，两童子分吃人参果的事，八戒听得明明白白，看得清清楚楚，馋得直流口水，恨不得立刻吃一个。【结束】 【开始】一会儿，悟空放马回来，八戒连忙把刚才的事情告诉了师兄。悟空早就听说过人参果，只是没有吃过，于是就按照八戒说的，用了一个隐身的法术，偷偷溜进道房，拿走了二童子摘果用的金击子，露出了一颗人参果果，跑到后园去摘人参果。这人参果树有一千多尺高，非常茂盛，朝南的枝头上，露出了一颗人参果。悟空轻轻一跳一跳，跳上树枝，用金击子一敲，那果子就掉下来，悟空紧跟着跳下来，可是却找不到那果子。悟空把果园里的土地神抓来，露出了一颗人参果，问他为什么把人参果偷走。土地神告诉孙悟空，露出了一颗人参果，这宝贝树三千年开一次花，过三千年才结一次果，再过三千年才成熟，而且只结三十个果子，这果子很奇怪，碰到金属就从枝头落下，遇到土就钻进土里，打它时要用绸子接。【结束】 【开始】悟空送走土地神后，一手拿金击子敲，一手扯着自己的衣服接了三个果子。悟空回到厨房后，让八戒把沙僧叫来，三个人每人分一个。猪八戒性急，一口把果子吞下去，什么味道也没有尝出来，就想让悟空再去偷几个。悟空告诉他这人参果是一万年才结三十个果子，能吃到一个，就应该满足了，说完就把金击子放回了原处。猪八戒心里不高兴，嘴里不停地说，要是能再吃一个该有多好，不巧被两童子听见了，慌忙跑到园子里去数，发现少了四个果子，想一定是被唐僧师徒四人偷吃了，就怒气冲冲地来找唐僧讲理，说∶“你这些和尚，叫你吃，你不吃，为什么偏偏偷着吃？”【结束】 【开始】刚开始，悟空师兄三人怎么也不承认偷吃了人参果，后来，经唐僧的一番开导，觉得确实是自己不对，就承认偷吃了三个。两个童子却说是四个，还骂了许多难听的话。悟空火了，拔了一根毫毛变成一个假悟空站在那挨骂，自己跳上云头向后园飞去。悟空一进果园，就拿出金箍棒一阵乱打，又使出自己的神力，把树连根拔出，摔在地上，仙果从树上掉下来，又碰到了土就全部钻到土里去了。【结束】 【开始】悟空回到房中，收回毫毛，让两个童子随便骂，也不还口。两个童子见唐僧他们一句话也不说，就想，是不是树太高，叶子太密，自己数不清，又回到果园仔细看看。一到果园，见那情景，吓得他们半死，趴在地上，放声大哭∶“师父回来，可怎么说呀！”两个童子商量，先把唐僧留住，师父回来也好说一些，于是回到房中，假说果子一个也没有少，是自己刚才数错了，请唐僧他们原谅。【结束】 【开始】接着，他们给唐僧师徒们准备了很多饭菜，趁他们吃饭时，关上门，又用一把大铜锁，把门锁上。孙悟空早就有了主意，等到夜深人静的时候，用开锁法术，将一道道紧锁的大门都打开，拔毫毛变成两个瞌睡虫，扔在童子脸上，两童子便呼噜地睡着了。唐僧师徒四人这才趁着黑夜逃出来，向西天赶路去了。天亮时镇元子回到五庄观，发现两个童子被人施了法术，躺在那里睡大觉，连忙运用神功把他们叫醒。二童子一见师父回来了，便急忙跪下，请师父原谅他们，并把唐僧师徒偷吃仙果，毁坏仙树的事情告诉了师父。镇元子想这一定是孙悟空干的，便去找孙悟空讲理。【结束】

动画
type: item
date: 2024-03-15T13:00:48+00:00
description: 1. 基本使用 基本使用 2. 其他属性 其他属性 3. 复合属性 复合属性 4. 动画与过渡的区别 动画与过渡的区别 过渡 动画

过渡
type: item
date: 2024-03-13T14:01:15+00:00
description: 1. 基本使用 基本使用 2. 高级使用 高级使用 ease（慢，快，慢） linear（匀速） ease-in（先慢再快） ease-out（先快再慢） ease-in-out（先慢再快再慢） step-start（不考虑过渡的时间，直接到终点） step-end（考虑过渡的时间，时间到了之后直接到终点） steps（分步过渡） 贝塞尔曲线 3. 过渡复合属性 过渡复合属性

3D变换
type: item
date: 2024-03-13T14:00:27+00:00
description: 1. 3D空间与景深 3D空间与景深 你好 2. 透视点的位置 透视点的位置 你好 3. 位移 位移 你好 4. 旋转 旋转 你好 5. 缩放 缩放 你好 6. 多重变换 多重变换 你好 7. 背部可见性 背部可见性 你好

2D变换
type: item
date: 2024-03-13T13:59:49+00:00
description: 1. 位移 位移 你好 你好 2. 缩放 缩放 你好 带带大师兄 3.旋转 旋转 你好 4. 扭曲 扭曲 你好 5. 多重变换 多重变换 你好 6. 变换原点 变换原点 你好

字体
type: item
date: 2024-03-13T13:58:53+00:00
description: 1. web字体 web字体 春风得意马蹄疾，不信人间有别离 春风得意马蹄疾，不信人间有别离 2. 字体图标—方式一 字体图标_方式一     3. 字体图标—方式二 字体图标_方式二 4. 字体图标—方式三 字体图标_方式三 <use xlink:href="#icon-guanzhu"></use> <use xlink:href="#icon-fuwuqi"></use> <use xlink:href="#icon-shouhaizhe"></use> <use xlink:href="#icon-gongjizhe"></use> 5. 字体图标—方式一—在线使用 字体图标_方式一_在线使用     6. 字体图标—方式二—在线使用 字体图标_方式二_在线使用     7. 字体图标—方式三—在线使用 字体图标_方式二_在线使用 <use xlink:href="#icon-guanzhu"></use> <use xlink:href="#icon-fuwuqi"></use> <use xlink:href="#icon-shouhaizhe"></use> <use xlink:href="#icon-gongjizhe"></use>

渐变
type: item
date: 2024-03-11T13:10:00+00:00
description: 1. 线性渐变 线性渐变 默认情况（从上到下） 通过关键词调整线性渐变方向 通过角度调整线性渐变方向 调整线性渐变的区域 带带大师兄 2. 径向渐变 径向渐变 默认情况 通过关键词调整径向渐变圆的圆心 通过像素值调整径向渐变圆的圆心 通过关键字circle调整为正圆 通过像素值调整为正圆 调整径向渐变的区域 综合写法 3. 重复渐变 重复渐变 重复线性渐变 重复径向渐变