- -webkit-：webkit核心的浏览器，也就是谷歌的Chrome浏览器；
- -moz-：Gecko核心的浏览器；
- -o-：Opera浏览器；
- -ms-：微软的IE浏览器。
1、CSS3选择器又分为：
1）基本选择器
2）属性选择器
3）伪类选择器
3-1）动态伪类
1.锚点伪类 —— :link，:visited
2.用户行为伪类 —— :hover，:active，:focus
3.目标伪类 —— :target
4.checked状态伪类
3—2）CSS3结构类：nth选择器
：first-child/last-child
：nth-child(n)
参数为n时选中所有行，
参数为n+i时表示从第i行开始下面的都被选中，
2n表示2的倍数行被选中，即偶数行，
3n表示3的倍数行被选中。
：nth-last-child(n)
————
：nth-of-type(n)
可以通过参数来选择表格的奇数行或偶数行，
odd代表奇数行，even代表偶数行。
: nth-last-of-type
: first-of-type/:last-of-type
————
：only-child
：only-of-type
：empty
4）否定选择器：not
伪元素(也可以使用 '😂)
1. element::first-line —— 元素的第一行，块级元素
2. element::first-letter —— 文本首字母，块级元素
3. element::before —— 常与content配合使用
4. element::after
5. element::selection —— 选中文本后的背景色与前景色
伪元素与元素的区别:
1. 无法通过JS获取其DOM
2. 无法通过浏览器开发者工具直接查看
3. 伪元素默认是 inline
2、CSS3新样式
1）CSS3圆角border-radius
复合属性：border-radius：
四个值：左上角 右上角 右下角 左下角
三个值：左上角 右上角和左下角 右下角
两个值：左上角和右下角 右上角和左下角
一个值：4个角都生效
当拿50%时，宽等于高为圆形 宽不等于高为椭圆形（百分比，参照的是元素本身的高度与宽度）
2）阴影box-shadow与text-shadow
box-shadow
语法：box-shadow: 横向偏移量 纵向偏移量 模糊程度 扩展程度 颜色 是否具有内阴影
属性值介绍:
2-1)偏移量：
素左上角（0，0）作为基准点,找水平方向和垂直方向的偏移量
水平： 正值 --- 右 ，负值 --- 左
垂直： 正值 --- 下 ，负值 --- 上
2-2)模糊程度：
边界模糊，但是边界线未动
由边界线向外模糊多少像素
2-3)扩展程度：
盒子阴影，上下左右都向外扩展多少像素
2-4)是否具有内阴影：
inset(默认没有，也就是默认是外阴影)
加上inset,盒子的阴影为内阴影
扩展程度可为负值，但是模糊程度不可以
text-shadow
语法： text-shadow 横向偏移量 纵向偏移量 模糊半径（数值越高越模糊，反之越清晰）阴影颜色
设置多个阴影，用逗号隔开:
例子：text-shadow: 2px 2px 2px red, -2px -2px 0 blue;
3）边框图片 border-image
语法：border-image：border-image-source [border-image-slice] [border-image-width] [border-image-outset] [border-image-repeat];
1. border-image-source：定义边框图像的路径；
2. border-image-slice：定义边框图像从什么位置开始分割；
3. border-image-width：定义边框图像的厚度（宽度）；
4. border-image-outset：定义边框图像的外延尺寸（边框图像区域超出边框的量）；
5. border-image-repeat：定义边框图像的平铺方式。
实例：border-image:url(border.png) 70 70 70 70 repeat;
4）文字和字体 text-overflow与word-wrap
text-overflow:clip(表示剪切) | ellipsis(表示显示省略标记);
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须其他条件：
定义强制文本在一行显示（white-space:nowrap）
溢出内容为隐藏（overflow:hidden）
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
word-wrap用来设置文本行为，当前行超过指定容器的边界时是否断开转行
word-wrap:normal |break-word;
5）文字与字体 @font-face
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
@font-face{
font-family:"字体名称"；
src:url("字体文件在服务器上的相对或绝对路径")；
}
这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。比如：
p{
font-size:12px;
font-family:"my font";/*必须项，设置@font-face中font-family同样的值*/
}
6）文字与字体 font-stretch
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。 让所有的div元素的文本更宽：
div { font-stretch: expanded; }
目前没有主流浏览器支持font-Stretch属性。 值说明：
wider：使得文本更宽
narrower：使得文本窄
ultra-condensed：使文本窄得不能再窄
extra-condensed：指定紧缩程度第二大的字体
condensed：指定略微紧缩程度第二大的字体
semi-condensed：指定略微紧缩的字体
normal：指明字体既不紧缩也不加宽
semi-expanded：指定略微加宽的字体
expanded：指定加宽的字体
extra-expanded：指定加宽程度第二大的字体
ultra-expanded：指定加宽程度最大的字体
inherit：指定该属性与元素父项的属性采用相同的计算值
7）盒子模型 box-sizing
box-sizing: content-box | border-box | inherit
- content-box：默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
- border-box：重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。根据传统IE盒模型可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）
- inherit：使元素继承父元素的盒模型模式
8）伸缩布局 flexbox
9）指针 pointer-event
pointer-events：字面理解是点击鼠标事件，值分别是auto和none。 当使用pointer-events:none，表示它将捕获不到任何点击，而只是让事件穿透到它的下面
pointer-events: auto|none;
属性值：
- auto：默认值。元素对指针事件做出反应，比如 :hover 和 click。
- none：元素不对指针事件做出反应。
10）重置 resize
规定可以由用户调整 div 元素的大小：
div {
resize:both; overflow:auto;
}
resize 属性规定是否可由用户调整元素的尺寸。 注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
- none：用户无法调整元素的尺寸。
- both：用户可调整元素的高度和宽度。
- horizontal：用户可调整元素的宽度。
- vertical：用户可调整元素的高度。
11）媒体查询 media
作用：
- 使用@media查询，可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询
语法：
@media mediatype and|not|only (media feature){ css-code; }
- 用@media开通 注意@符号
- mediatype 媒体类型
- all:所有设备
- print：打印机和打印预览
- screen: 电脑屏幕、平板电脑、智能手机等
- 关键字 and not only
- media feature 媒体特性，必须有小括号包含
- width: 定义输出设备中页面可见区域的宽度
- min-width:定义输出设备中页面最小可见区域宽度
- max-width:定义输出设备中页面最大课件区域宽度
引入资源：
<link rel="stylesheet" href="style1.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style2.css" media="screen and (min-width: 640px)">
3、CSS3背景与渐变
3-1）CSS3背景
1）background-image
background-cilp：border-box / padding-box / content-box —— 指定背景的绘制区域（裁剪）
border-box：背景被裁剪到边框盒（从边框开始绘制背景图片）---默认
padding-box：背景被裁剪到内边距框（从内边距开始绘制背景图片）
content-box：背景被裁剪到内容框
2）background-origin：border-box / padding-box / content-box —— 设置背景图像的原始起始位置
border-box：相对于边框来定位
padding-box：相对于内边距来定位
content-box：相对于内容框来定位
background-position:定义背景图片的位置，水平与垂直方向上面的偏移量(参考点)
3）background-repeat —— 设置是否及如何重复背景图像
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置
4）background-size：number / % / cover / contain —— 指定背景图像的大小
number: 宽度 高度（如果只写一个数值，第二个数值默认auto）
百分比： 0% - 100% 之间的任何值，此时的百分比参照于元素div的大小
cover：将背景图片等比缩放以填满整个容器（最远边），如果高度达到一定比例100%，宽度多出的会溢出，但是，具体那部分溢出取决于定位
contain：将背景图片等比缩放至某一边紧贴容器边缘为止（最近边），如果图片高度比较小，高度就会有空白区域出现
]()
3-2）css3 object-fit object-position
object-fit
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。 您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
img.a {
width: 200px; height: 400px; object-fit: cover;
}
属性值
- fill：默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
- contain：保持原有尺寸比例。内容被缩放。
- cover：保持原有尺寸比例。但部分内容可能被剪切。
- none：保留原有元素内容的长度和宽度，也就是说内容不会被重置。
- scale-down：保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
- initial：设置为默认值，关于 initial
- inherit：从该元素的父元素继承属性。关于 inherit
object-position
根据容器大小重置图片的大小，并设置图片的位置：
img.a {
width: 200px; height: 400px; object-fit: none; object-position: 5px 10%; border: 5px solid red;
}
object-position 属性一般与 object-fit一起使用，用来设置元素的位置。 object-position 一般用于 img 和 video 标签。
position：指定 image 或 video 在容器中的位置。第一个值为 x 坐标位置的值，第二个值为 y 坐标位置的值。表示的方式有：
object-position: 50% 50%;
object-position: right top;
object-position: left bottom;
object-position: 250px 125px;
- initial：设置为默认值，关于 initial
- inherit：从该元素的父元素继承属性。关于 inherit
3-3）CSS3渐变
1）线性渐变 —— 是沿着一根轴线改变颜色，从起点到终点进行顺序渐变
语法：background:linear-gradient(方向，开始颜色，结束颜色)
方向介绍：
1-1）方向从上到下
background: linear-gradient(red,blue);
1-2）方向从左到右
background: linear-gradient(**to right**,red,blue);
1-3）对角
background: linear-gradient(to right bottom,red,blue);
1-4）角度(单位deg)
background: linear-gradient(角度,red,blue);
角度说明：0deg 将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变
颜色结点：默认每个颜色均匀分布
background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);
background: linear-gradient(red 10%,blue); —— 从0%到10%，为红色，从10%到100%为红色到蓝色的渐变
background: linear-gradient(red,blue 30%); —— 从0%到30%，为红色到蓝色的渐变
background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1)); —— 由透明色变为不透明色
1-5）重复渐变
background: repeating-linear-gradient(90deg,red 0%,blue 20%); —— 把元素的整体宽度看成100%
2）径向渐变 —— 从起点到终点，颜色从内向外进行圆形渐变
background:radial-gradient(形状尺寸，开始颜色，结束颜色)
2-1)形状分类：
circle --- 圆形
ellipse --- 椭圆形
当元素的高和宽一样时，参数无论设置哪个，都是圆形
2-2)尺寸大小:
2-2-1)closest-side最近边
background: radial-gradient(closest-side circle,red , blue);
2-2-2)farthest-side 最远边
background: radial-gradient(farthest-side circle,red , blue);
2-2-3)closest-corner最近角
background: radial-gradient(closest-corner circle,red , blue);
2-2-4)farthest-corner最远角
background: radial-gradient(farthest-corner circle,red , blue);
2-3)颜色结点：
background:radial-gradient(circle,red 50% ,blue 70%);
注：此时的百分比,指的是圆心到元素最远端的距离（角度）
2-4）重复渐变 ：
background: repeating-radial-gradient(red 0%,blue 20%);
4、CSS3过渡 transition
定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。
属性：
1.transition-property：：none | all | property
定义：设置对象中的参与过渡的属性
none： 没有属性改变
all : 默认值，所有属性都改变
property： 元素的属性名 width,color等
2.transition-duration：time
定义: 设置对象过渡的持续时间
规定完成过渡效果需要花费的时间，以秒或者毫秒计，默认值0
3.transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
定义：设置对象中过渡的动画类型，即规定过渡效果的速度曲线。
ease:平滑过渡（0--慢--快--慢），默认值 = cubic-bezier(0.25,0.1,0.25,1) （贝塞尔曲线）
linear:线性过渡（匀速）= cubic-bezier(0,0,1,1)
ease-in:慢--快 = cubic-bezier(0.42,0,1,1)
ease-out:快--慢 = cubic-bezier(0,0,0.58,1)
ease-in-out:慢--快--慢 = cubic-bezier(0.42,0,0.58,1)
4.transition-delay：time
定义：设置对象延迟的过渡时间
指定秒或者毫秒数来延迟动画效果的开始，默认是0
5.transition ： property duration timing-function delay；
复合属性，过渡时间和延迟时间的顺序不能乱
5、CSS3变换 transform
定义：让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素。
语法：transform：none | <transform-function> 默认值是none
5-1）2d变换
1.rotate()旋转
定义：通过指定一个角度参数，对元素指定一个2D的旋转
语法：transform：rotate(angle) 单位deg
说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转
2.translate()平移
定义：根据X轴和Y轴的位置给定参数，使当前元素位置移动
语法：transform：translateX() 单位px —— 仅水平方向移动
语法：transform：translateY() 单位px —— 仅垂直方向移动
语法：transform：translate( X, Y) 单位px —— 水平方向和垂直方向同时移动
3.scale( )缩放
定义：设置元素的缩放程度
语法：transform：scaleX() 没有单位 —— 仅水平方向缩放
语法：transform：scaleY() 没有单位 —— 仅垂直方向缩放
transform：scale(x,y) 没有单位 —— 使元素水平和垂直方向同时缩放
4.skew()扭曲/倾斜
定义：设置元素的倾斜状态
skewX( ) 仅使元素在水平方向上扭曲变形 单位deg 正值 ----逆时针
skewY( ) 仅使元素在垂直方向上扭曲变形 单位deg 正值 ----顺时针
skew( ) 使元素在水平方向和垂直方向上扭曲变形 单位deg
注意：0deg与180deg 效果一样
5.变换基点
定义：元素变换的基准点
语法： transform-origin：水平方向 垂直方向
left top 左上角 ----四个角均可以
25% top
50px 50px
默认值：rotate 几何中心点，skew 几何中心点，scale 几何中心点，translate 本身位置
使用方式：
transform: translate(120px, 50%) 位移
transform: scale(2, 0.5) 缩放
transform: rotate(0.5turn) 旋转
transform: skew(30deg, 20deg) 倾斜
5-2）3d变换
1.开启3d空间transform-style: preserve-3d; 一般给父元素开启
2.子元素设置3d变换效果
2-1）rotateX()
定义：指对象在X轴上的旋转角度（变换基点： 50% 50% 0）
2-2）rotateY()
定义：指对象在Y轴上的旋转角度（变换基点： 50% 50% 0）
2-3) rotateZ()
定义：指对象在Z轴上的旋转角度（变换基点： 50% 50% 0）
2-4)translateZ()
定义：指对象在Z轴上面的平移（变换基点： 50% 50% 0）
2-5)scaleZ()
定义：指定对象的Z轴缩放（变换基点： 50% 50% 0）(无太大意义，开启3d空间)
3.设置景深：实现近大远小
父元素：perspective: 300px;
子元素:transform:perspective(300px) translateZ(-200px);
注意：景深：可选值：大于或等于0,景深值越大，元素看起来越大
4.变换基点
transform-origin: top; 关键字表示 ( 50% 0 0 )
注意：立体3d盒子 Z：只能使用具体的长度，不能使用百分比和关键字
5.景深中心点：改变观察者视角
perspective-origin: top;
perspective-origin: top right;
6.元素背面可见还是不可见
backface-visibility:visible ;（默认值：可见）
backface-visibility: hidden; 不可见
6、CSS3动画
定义：使元素从一种样式逐渐变化到另外一种样式的效果
6-1) @keyframes
定义：keyframes关键帧，用来决定动画变化的关键位置
语法：@keyframes animationname{keyframes-selector{cssStyles;}}
animationname：必写项，定义动画的名称
keyframes-selector：必写项，动画持续时间的百分比 0% - 100%之间， 或者使用form和to关键字也可以设置，form代表0%，to代表100%
示例:
@keyframes abc {
from{transform: rotate(0)}
50%{transform:rotate(90deg)}
to{transform: rotate(360deg)}
}
6-2) animation属性
1.animation-name：keyframename | none
keyframename：指定要绑定到选择器的关键帧的动画名称
2.animation-duration：time
定义：设置对象动画的持续时间
说明：指定对象播放完成需要花费的时间，默认值是0
3.animation-timing-function: value;
定义：设置对象动画的过渡类型，即规定动画的速度曲线
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
4.animation-delay：time
定义：设置动画的延迟时间
5.animation-iteration-count：infinite | number
定义：设置对象动画的循环次数
number为数字，其默认值是1
infinite：无限循环次数
6.animation-direction：normal , reverse , alternate , alternate-reverse
定义：设置对象动画是否反向运动
normal : 正常方向
reverse :反向运动
alternate ： 先正常运动在反向运动，并持续交替运行， 需要配合循环属性使用
alternate-reverse ： 先反向运动在正常运动，并持续交替运行， 需要配合循环属性使用
7.animation-play-state：paused | running
定义：指定对象是否正在运行或已暂停
paused ： 指定暂停动画
running : 默认值，制定正在运行的动画
示例: #box:hover{animation-play-state: paused;}—鼠标移动到box上暂停动画
8.animation-fill-mode
定义：设置动画结束后的状态
none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态
forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）
both：设置对象状态为动画结束或开始的状态，结束时状态优先
9.animation复合属性（不推荐使用 ）
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-动画animation</title>
<style>
.fa {
width: 500px;
height: 500px;
border: 1px solid;
perspective: 200px;
margin: 0 auto;
}
.sn {
/* transition: all 2s ease-out 1s; */
width: 150px;
height: 150px;
background-color: green;
/* animation: onemove 5s ease-in-out 2s 3 alternate; */
animation: twomove 5s ease-in-out 2s 3 alternate;
}
@keyframes onemove {
from {
width: 150px;
height: 150px;
}
to {
width: 400px;
height: 400px;
}
}
@keyframes twomove {
0% {
/* transform复合值 通过空格隔开 */
transform: translate3d(100px, 100px, 0px) scale(.5);
}
50% {
transform: translate3d(200px, 200px, 0px) scale(2);
}
100% {
transform: translate3d(1, 1, 1 ,45deg) skewX(45deg);
}
}
</style>
</head>
<body>
<div class="fa">
<div class="sn"></div>
</div>
</body>
</html>
注意：在css3里面，给元素设置圆角、阴影、变换等属性时，尽管外形位置发生改变，但是元素本身大小和位置不变
参考链接：
