花铛

层叠上下文：Stacking Context。是 CSS 中用于控制元素在 z 轴上的堆叠顺序的机制。z 轴：垂直于屏幕的轴。

符合真实世界的投影。透明部分，光线穿过，没有投影；非透明部分，光线穿过，有投影。filter 属性为元素添加视觉效果。来为不规则的图形设置阴影。：只是盒阴影，即盒子的阴影。可以使用空格分隔多个滤镜。可以使网页呈现哀悼模式。

网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

Flex 是 Flexible Box 的缩写，意为弹性的盒子，所以 Flex 布局也叫做 Flex 弹性布局。任何一个 HTML 元素都可以通过设置指定为 Flex 布局。采用 Flex 布局的元素，称为 Flex 容器（），简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称项目。Flex 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis主轴的开始位置叫做main start，结束位置叫做main end；

媒体查询：Media querys，针对不同大小的屏幕写不同的样式，让网页在不同大小的屏幕上都能正常显示。媒体查询在 CSS2 的时候已经出现，CSS2 用 link 标签，而 CSS3 用@meida定义。两者用法类似，但是 CSS3 与 CSS2 相比会减小页面的请求。

2010 年，CSS3 规范推出。

CSS3 2D 变形可以对元素进行旋转，缩放，移动和倾斜。

动画通过 JavaScript 和 CSS 都可以实现。

CSS3 渐变可以在两个或多个指定的颜色之间平稳的过渡显示。以前，必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变，可以减少下载的时间和宽带的使用；此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。

text-shadow：text-shadow：用来定义文本阴影。语法：text-shadow：h-shadow v-shadow blur color，第一个参数为水平阴影，第二个参数为垂直阴影，第三个参数为模糊的距离，第四个参数为阴影的颜色。h1{ text-shadow: 5px 5px 5px #FF0000;}box-shadow：适用于盒子阴影。div { ...

以前的 CSS 版本，网页设计师不得不使用用户计算机上已经安装的字体。使用 CSS3，网页设计师可以使用自己的字体。只需简单地将字体文件包含在网站中，就会自动下载给用户。

假如背景区域的宽高不能恰好包含背景图片的话，背景图片会等比例缩小以可以容纳显示在背景区域中，背景某些区域会有空白。假如背景区域的宽高不能恰好包含背景图片的话，背景图片会等比例放大以可以完全覆盖背景区域，一部分就会被裁切掉。会保持图像的纵横比并缩放至完全容纳在背景区域中。cover：属性值就为 cover。CSS3 以前，背景图片的大小由图片的实际大小决定。：默认值，背景图片被裁剪至背景区域的边框区。：背景图片被裁剪至背景区域的内边距区。：背景图片被裁剪至背景区域的内容区。用来设置背景图片的裁剪区域。

为像素数，只能为正值，值越大，边缘越模糊。值为 0 时表示不具有模糊效果。spread：可选。为像素数，允许负值。正值时阴影延展扩大，负值时阴影会缩小。阴影的 x 轴偏移距离。为像素数，允许负值。阴影的 y 轴偏移距离。为像素数，允许负值。属性为元素添加圆角边框。数值越小，弧度越小。属性值可以用逗号隔开多个，表示携带多个阴影。从外层阴影改变为内层阴影。属性用于为元素添加边框背景。属性为元素添加盒阴影。都为正值时，阴影在右下角。都为负值时，阴影在左上角。为负值时，阴影在右上角。为正值时，阴影在左下角。

属性可以设置一个元素的 width 和 height 中是否包含 padding 和 border。这两个 div 设置的宽度和高度一样，但真实显示的大小不一致，因为 div2 设置了内边距。，所以真实显示的宽度和高度会比设置的 width 和 height 更大。

CSS3 可以将文本内容设计成像报纸一样的多列布局。