CSS3入门

一、定义
是css最新版本，用于美化网页
二、历史
有CSS2 发展而来，按模块化开发，发布是一个时间段

三、浏览器
按照是否有自己的内核，分为主浏览器和壳子浏览器
主浏览器： IE （-ms-） 火狐（firefox -moz-） 谷歌（Chrome -webkit-） 苹果（Safari -webkit-） Opera（-o-）

四、边框圆角 border-radius

取值： 可以是长度值如10px 20em这种，也可以是百分比%
1.取1个值，4个角都一样
2.取多个值，按照上右下左的顺序分配，没有的和对角一样

正方形div border-radius：50% 圆

长方形div border-radius：50% 椭圆

五、盒子阴影 box-shadow
取值顺序：水平位置 垂直位置 模糊距离 阴影尺寸 颜色 内外阴影

六、文本阴影 text-shadow
取值顺序：水平位置 垂直位置 模糊距离 颜色

七、字体
font-size字的大小

font-weight 字的粗细

font-style 字的风格

font-family 字的类型

font:风格 粗细 大小 类型 （风粗大类，大类必写）

自定义字体：
@font-face{
font-family：自己取的名字;
src:url(书法字体的路径)
}

.类名{
font-family：和font-face里的名字一样；
}

八.background-size

九、不透明度

十 2D的转换

样式名：transform

取值：
1.位移：translate（x,y） translateX(x) translateY(y)

2.旋转：rotate（数字deg） 数字为正数的时候，顺时针转，数字为负数逆时针转,旋转的默认基点在中心点，可以加样式：transform-origin：水平位置 垂直位置 来设置基点

3.缩放：scale(宽的倍数，高的倍数) 倍数是1原大小， 倍数>1 放大 0<倍数<1 缩小 倍数取负值 有翻转的效果 -1<倍数<0 缩小翻转
倍数<-1 放大翻转 倍数=-1 翻转 倍数=0 标签隐藏

4.倾斜/拉伸：skew（xdeg,ydeg） 在水平和垂直方向倾斜多少度 skewX（xdeg） skewY（ydeg）
和旋转的区别：旋转改变位置 倾斜改变形状

总结：能让标签隐藏的样式和取值
①display：none； 原位置会消失 其它的方法保留
②opacity：0；
③transform：scale（0,0）；
④visibility：hidden；

十一、3D转换
1.transform-origin 基点（不动的点）
①x轴，y轴可以取关键字 长度值 %，z轴只能取长度值
②x轴的关键字：left center right
③y轴的关键字：top bottom

2.视角（从多远的距离看）perspective：1000px 写在父标签的样式内

3.3d舞台（是否保留3d效果） transform-style：preserve-3d 写在父标签的样式内

十二、鼠标样式 cursor 取值 pointer 小手

十三、渐变
1.定义：在两个或多个颜色之间平稳的变化

2.生成：由浏览器生成的图片

3.分类：线性渐变 径向渐变

4.线性渐变语法 background：linear-gradient（to 方向，颜色1，颜色2，颜色3…）

to 方向 不写 默认是从上往下，可以写to left/right/top/bottom ,颜色至少2个，可以写多个

5.重复的线性渐变background：repeating-linear-gradient（颜色1，颜色2，颜色3… %）

颜色2个及以上都可以，最后一个颜色一定要加%，有多个颜色加了%，后一个颜色的%比前一个大，颜色和%之间用空格隔开

6.径向渐变，
①颜色均匀分布：background：radial-gradient（颜色1，颜色2，颜色3…）
②颜色不均匀分布：在①的基础上加上%，%取值同5的
③把默认的椭圆变成圆：在①的基础加 circle，也可以把标签改成一个正方形（width=height），注意不影响布局
④重复的径向渐变同5，只要把linear改为radial即可

十四、过渡
1.定义：针对同一个样式名，从一种值到另一种值的变化

2.分样式：
①transition-property 要过渡的样式名 取值： none 无 all都/所有 具体样式名 必写
②transition-duration 过渡花费的时间 取值：秒 3s 毫秒3000ms 必写
③transition-delay 等待时间 取值： 选写
④transition-timing-function 运动曲线 取值：默认值ease（开车） linear（匀速） ease-in（慢速开始）ease-out（慢速结束）ease-in-out（慢速开始和结束） 见网址

3.复合样式
transition：样式名 花费时间 时间曲线 等待时间 他们无顺序要求，但是浏览器以第一个时间为花费时间

十五、动画
1.定义：同过渡

2.分样式：
①animation-name 动画名字 取值是自己创建动画时取的名字
②animation-duration 花费时间 取值s或ms
③animation-timing-function 时间曲线 取值同过渡
④animation-delay 等待时间 取值s或ms
⑤animation-iteration-count 播放次数 取值是具体数字或infinite（循环播放）
⑥animation-direction 是否轮流反方向播放 取值：alternate（是）默认normal（否）

3.复合样式：
animation：① ② 必须写 ③ ④ ⑤ ⑥选写 无顺序要求，浏览器以第一个时间为花费时间

4.动画调用之前必须先创建
@keyframes 动画名字{
0%{各种样式声明}
30%{各种样式声明}
60%{各种样式声明}
100%{各种样式声明}
}

动画名字自己取，有意义即可，百分比分段可以按照需求自己分，每段里面的样式声明按照需要写