Css3新特征
CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的规范。常用的有以下几个模块：
选择器
在CSS3 中，相对于 CSS2.1 版本的 7 个选择器，增加了更多其他的选择器，实现了更多的选择方式，我们在HTML+CSS基础阶段已经学习过
| 名称**** | 举例**** | 作用**** | |
|---|---|---|---|
| 子代选择器 | p>a{ corlor:#f00 } | 选择p标签中的子标签a | |
| 相邻兄弟选择器 | p~a | 选择p标签后近邻同级的a标签 | |
| 通用兄弟选择器 | p+a | 选择p标签后所有和其同级的a标签 | |
| 结构伪类选择器 | p:first-child | 选择p元素的第一个子元素 | |
| p:last-child | 选择p元素的最后一个子元素 | ||
| p:only-child | 选择p元素内部没有任何兄弟元素的后代元素 | ||
| p:nth-child(n) | 选择p元素内的第n个子元素 | ||
| p:nth-last-child(n) | 选择p元素内的倒数第n个子元素 | ||
| p:nth-of-type(n) | 选择某元素内子元素是p元素的第n个p元素 | ||
| p:nth-last-of-type(n) | 选择某元素内子元素是p元素的倒数第n个p元素 | ||
| p:only-of-type | 选择p元素内部没有任何相同类型的后代元素 | ||
| 状态伪类选择器 | :root | 选择文档的根元素 | |
| p:empty | 选择没有任何子元素的p元素，包括空格、换行等文本节点 | ||
| Input:enabled | 选择每个可被使用的input标签 | ||
| Input:disabled | 选择每个处于禁用状态的input元素 | ||
| Input:checked | 选择每个处于选中状态的input元素，type类型必须是checkbox或radio，也可以使select标签 | ||
| :not(p) | 选择每个非p元素的元素 | ||
| 伪元素 | p::before | 在p元素内的头部添加一个子元素（必须设置content属性） | |
| p::after | 在p元素内的尾部添加一个子元素（必须设置content属性） | ||
| p::first-letter | 选择p元素中文本内容的第一行的第一个字母（元素必须是块级元素） | ||
| p::first-line | 选择p元素中文本内容的第一行内容（元素必须是块级元素） | ||
| p::selete | 选择p元素中文本内容被鼠标拖选的内容 | ||
| 属性选择器 | input[name] | 选择具有name属性的input元素 | |
| Input[name=”att”] | 选择name属性值为att的input元素 | ||
| Input[name^=”att”] | 选择name属性值以att开头的input元素 | ||
| Input[name$=”att”] | 选择name属性值以att结尾的input元素 | ||
| Input[name*=”att”] | 选择name属性值中含有att的input元素 | ||
| Input[name~=”att”] | 选择name属性值中含有空格隔开的att字样的input标签 | ||
| Input[name | =”att”] | 选择name属性值以att或att-开头的input标签 |
2D/3D转换
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸
transform 属性应用于元素的2D或3D转换。允许将元素进行旋转，缩放，移动，倾斜等（transform，转换、变换）
2D转换（平面转换）
| transform属性值 | 作用 |
|---|---|
| translate(x,y) | 让元素在x轴和y轴上进行移动 |
| translateX( ) | 分写属性，让元素在x轴上进行移动 |
| translateY( ) | 分写属性，让元素在y轴上进行移动 |
| rotate | 旋转，单位是deg（角度），参数为正时，顺时针旋转；参数为负时，逆时针旋转 |
| scale( n) | 对元素进行缩放，参数是一个数字或者是百分比 |
| skew（x,y） | 对元素进行倾斜，单位是角度，参数可以是一个也可以是两个，但是我们一般只用一个 |
| matrix( scaleX, skewY, skewX, scaleY, translateX, translateY ) | matri有六个参数，包含旋转，缩放，移动（平移）和倾斜功能 |
/* 让元素相对于的位置进行平移 */
transform: translate(50px, 50px);
/* 分写属性 */
transform: translateX(50px);
transform: translateY(50px);
/* 让元素相对于原来的位置进行旋转 */
transform: rotate(-60deg);
/* 让元素相对于原来的大小进行缩放 */
transform: scale(325%);
/* 让元素相对于原来的形状进行倾斜 */
/* 只写一个参数的话，是x轴倾斜 左右倾斜 */
transform: skew(30deg);
/* 上下倾斜 */
transform: skewY(30deg);
/* 写两个参数，x轴倾斜，y轴也倾斜 */
transform: skew(30deg,50deg);
/* matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能 */
/* matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ) */
transform: matrix(1.5, 0, 0, 2, 100, 150);
3D转换（空间转换）
| transform属性值 | 作用 |
|---|---|
| translate3d(x,y,z) | 让元素在3D空间中（x轴、y轴、z轴上）进行平移 |
| translateX( ) | 分写属性让元素在x轴上平移 |
| translateY( ) | 分写属性让元素在y轴上平移 |
| translateZ( ) | 分写属性让元素在z轴上平移 |
| retate3d( ) | 让元素的在3D空间中进行旋转（绕x轴、y轴、z轴） |
| retateX( ) | 分写属性让元素绕x轴进行旋转 |
| retateY( ) | 分写属性让元素绕y轴进行旋转 |
| retateZ( ) | 分写属性让元素绕z轴进行旋转 |
| scale3d( ) | 让元素在3D空间中进行缩放（x轴上的长、y轴上的宽、z轴的高） |
| scaleX( ) | 分写属性让元素的长进行缩放 |
| scaleY( ) | 分写属性让元素的宽进行缩放 |
| scaleZ( ) | 分写属性让元素的高进行缩放 |
/* 3D转换 */
/* 3D平移 */
transform: translate3d(50px,50px,50px);
/* 分写盒子在x轴、y轴、z轴上的移动 */
transform: rotateX(10px);
transform: rotateY(10px);
transform: rotateZ(10px);
/* 3d旋转 */
transform: rotate3d(1,1,1,45deg)
/* 分写属性 绕x轴、y轴、z轴旋转 注意坐标系与数学中的3维坐标系不同 */
transform: rotateX(60deg);
transform: rotateY(60deg);
transform: rotateZ(60deg);
/* 3D缩放 */
transform: scale3d(2, 0.5, 6);
/* 分写属性 */
transform: scaleX(3);
transform: scaleY(6);
transform: scaleZ(9);
在使用3D转换是一定要注意的是，空间坐标系与平面坐标系的不同
在进行3D转换时，一定要给需要进行3D转换的盒子的父盒子转换为3D空间。且为其添加透视效果（离得近显得大、实，离得远显得小、虚）
/* 转换为3D效果 要添加给盒子的父元素 使子元素处于3d空间中*/
transform-style: preserve-3d;
/* 给盒子处于的3D空间添加一个透视效果 要添加给父元素 */
/* 常用值为800-1200 */
perspective: 1000px;
背景和边框
背景与边框相关属性回顾CSS 课件内容
渐变
线性渐变
/* 线性渐变 background属性值为 linear-gradient 默认是从上到下 */
background: linear-gradient(pink,red,blue,yellow,green);
/* 如果想自定义线性渐变的方法 可以在前面加上to 方位词 */
background: linear-gradient(to left,red,yellow);
background: linear-gradient(to top, red, yellow);
/* 延斜线渐变 */
background: linear-gradient(to left top, red, yellow);
径向渐变
/* 径向渐变 以中心点为起点 逐层向外进行渐变 */
background: radial-gradient(red, yellow);
文本特效
| 属性名 | 作用 |
|---|---|
| text-shadow | 设置文本阴影：水平阴影、垂直阴影、模糊的距离、阴影颜色 |
| box-shadow | 设置盒子阴影：水平阴影、垂直阴影、模糊的距离、阴影颜色 |
| text-overflow | 对文本溢出时的处理：ellipsis显示为省略号 |
/* 文本阴影：阴影的水平移动 阴影的垂直移动 阴影的模糊程度 阴影的颜色 */
text-shadow: 5px 5px 3px #000;
/* 盒子阴影:阴影的水平移动 阴影的垂直移动 阴影的模糊程度 阴影的颜色 */
box-shadow: 5px 5px 10px #000;
/* 文本溢出属性 */
/* ellipsis溢出显示为省略号 */
text-overflow: ellipsis;
动画效果
过渡
/* 过渡动画属性：需要过渡的属性（必须是值类型） 过渡动画的演出时长 过渡动画的演出速度 过渡动画延迟演出的时间 */
transition: all 1s;
/* 分写属性 */
/* 添加过渡动画的属性 */
transition-property: all;
/* 过渡动画演出时长 */
transition-duration: 0s;
/* 过渡动画的演出速度 */
transition-timing-function: linear;
/* 过渡动画延迟演出的时间 */
transition-delay: 0s;
动画
/* 动画 必须搭配关键帧使用*/
/* animation：动画名 动画演出时间 动画演出速度 延迟动画演出的时间 动画执行的次数 动画执行方向 动画填充模式 动画执行状态*/
animation: anima 3s;
/* animation的分属性 */
/* 动画名称 */
animation-name: anima;
/* 动画演出时间 */
animation-duration: 0s;
/* 动画演出速度 */
animation-timing-function: linear;
/* 延迟动画演出的时间 */
animation-delay: 0s;
/* 动画执行的次数 */
animation-iteration-count: 2;
/* 动画执行方向 */
animation-direction: normal;
/* 动画填充模式 */
animation-fill-mode: forwards;
/* 动画执行状态 通过JavaScript控制其运行或暂停 */
animation-play-state: running;
/* 多动画累加，使用逗号进行分隔 */
/* 定义动画的关键帧 */
/* 使用关键字定义关键帧 */
@keyframes anima {
/* 使用from to的方式 */
from {
width: 200px;
}
to {
width: 50px
}
}
/* 使用百分比进度定义关键帧 */
@keyframes anima {
0% {
background: yellowgreen;
}
50% {
background: blueviolet;
}
100% {
background: violet;
}
}
用户界面
| 属性 | 作用 |
|---|---|
| resize | 设置元素是否能被用户调整，常用于textarea |
| box-sizing | 设置应该如何计算一个元素的总宽度和总高度（content-box标准盒模型，border-box怪异盒模型） |
/* 设置元素是否能被用户调整 */
/* 不能被用户调整宽高 */
resize: none;
/* 可以被用户调整宽高 */
resize: both;
/* 仅可被用户调整宽 */
resize: horizontal;
/* 仅可被用户调整高 */
resize: vertical;
多列布局
| 属性 | 作用 |
|---|---|
| column-count | 设置多列，每列会平分整个显示区的宽度 |
| column-gap | 设置每列之间的间隔宽度 |
| column-rule：宽度 线型 颜色 | 设置列之间的分割线 |
| column-rule-width | 分属性设置列之间分割线的粗细 |
| column-rule-style | 分属性设置列之间分割线的线型 |
| column-rule-color | 分属性设置列之间分割线的颜色 |
| column-width | 设置每列的宽度，尽量让盒子能分出更多的列 |
| column-span | 指定内容跨列（常用属性值all，跨所有列） |
| columns | column属性与column-count属性的合写，参数1column、参数2column-count |
/* 设置多列 每列会平分整个显示区的宽度 */
column-count: 5;
/* 设置每列之间的间隔宽度*/
column-gap: 50px;
/* 设置列之间的分割线 */
column-rule: 2px solid #000;
/* 分属性 */
/* 粗细 */
column-rule-width: 5px;
/* 线型 */
column-rule-style: dashed;
/* 颜色 */
column-rule-color: blueviolet;
/* 设置每列的宽度
会让盒子尽可能多的分出更多列
*/
column-width: 200px;
/* 合写的属性 参数1 column-width 参数2 column-count */
columns: 300px 5 ;
/* 指定内容跨列 all就是跨所有列 */
column-span: all;
盒模型
多媒体查询 @media
弹性盒模型（flex布局/伸缩布局） display:flex
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
滤镜
filter属性
filter属性会将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染
HSL色彩模型
HSL色彩模型就是色相、饱和度和明暗度三者混合组成的颜色模型。表示为 hsla(hue, saturation, lightness)
l 色相（HUE）：在基础色轮上分布的颜色，也称为纯色，纯色是不含黑、白、灰的颜色
l 饱和度（SATURATION）：是指颜色的鲜亮程度，在纯色中加入灰色，会降低色彩的饱和度。100%是纯色，没有灰色阴影。50%是50%的灰色，0%是完全灰色。下图是饱和度从100%到0%的变化
l 明暗度（LIGHTNESS）：是指颜色的色彩的明暗程度，在纯色中加入黑色或白色，会改变颜色的明暗度。其中0%表示全暗（黑色），100%表示全明（白色），50%是即不明也不暗。
filter基础使用
| 属性中使用的函数**** | 作用**** |
|---|---|
| brightness( ) | Brightness（亮度），让图像更明亮或更暗淡，0% 将创建全黑图像，100% 展示原图，大于100%展示更明亮的图片效果 |
| contrast( ) | Contrast（对比度），增加或减少图像的对比度，值是0%图像全灰图像，没有对比度。100% 展示原图，大于100%展示对比度更高的图片效果 |
| saturate( ) | Saturate（饱和度），超饱和或去饱和输入的图像，值为0% 则是完全不饱和，完全转为灰度图像，100% 展示原图，大于100% 则有更高的饱和度 |
| grayscale() | Grayscale（灰度），改变图像灰度，值在 0% 到 100% 之间，值为0%展示原图，值为100% 则完全转为灰度图像 |
| blur( ) | Blur（模糊度），模糊图像。传入值单位为px，值越大模糊程度越大 |
| drop-shadow( ) | drop-shadow（投影），给图像添加阴影，与box-shadow的属性值一样 |
| hue-rotate( ) | hue-rotate（色相旋转度），改变图像向整体色调，angle（用于表示角的大小）设定图像会被调整的色环角度值。值为0展示原图，大于360deg相当于又绕色环一圈 |
| invert( ) | Invert（转化度），反转图像颜色，值在 0% 和 100% 之间，值为100%则图像完全反转。值为 0% 则图像无变化 |
| opacity( ) | Opacity（透明度），值在 0% 和 100% 之间，值为 0% 则是完全透明，值为 100% 则图像无变化 |
| sepia( ) | Sepia（深褐色），将图像转为棕褐色，值在 0% 到 100% 之间，值为 100% 则完全是深褐色的，值为 0% 图像无变化 |
****所有函数在 filter 属性值中可以组合起来使用，可以使用blur函数制作毛玻璃效果，或调整亮度、对比度、饱和度函数制作不同的滤镜效果，使用grayscale函数在特殊时候给整个网站调整为黑白颜色等
详细参考文档：juejin.cn/post/700437…****
