前言
嗨，老伙计们，你们好吗？我是lucky赵赵，请大家多多指教呀！
菜鸟赵赵重走前端之路，今天学CSS3！
不喜勿喷，不喜勿喷，接受任何善意的指教 ^ _ ^
CSS3
（一）定义及作用
CSS3是CSS最新的标准 本人浅显的觉得，这两者其实并没有很大的区别，毕竟CSS3向前兼容，它俩归根究底也就是样式而已 以下对一些新特性进行介绍
（二）边框圆角
减少网站的维护工作量、提高网站性能、增加了视觉美观性
1.样式名
border-radius复合写法
2.取值
可以取px单位的具体值，也可以取%
取1个值，四个角都一样，取多个值按照上左、上右、下右、下左的顺序顺时针取值，没有的和对角一样
取值中带有/符号表示单独设置圆角的x轴和y轴角度的复合写法
javascript
eg:
/前的表示四个角的x轴值，/后的表示四个角的y轴值
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;3、注意
①正方形设置圆角时，设置为宽高的一半就可以形成一个圆，一旦形成一个圆就不能再变小了
②长方形设置圆角时，只能设置百分比才能形成一个椭圆，如果设置px会形成一个囊形，一旦形成一个囊型圆就不能再变小了
③设置圆角并不一定要有border属性，例如有背景颜色或者img一样可以设置圆角
④在单独设置圆角的x轴和y轴值时，需要注意，想要图形变长需改大y轴值，变宽需改大x轴值，变矮改小y轴值，变瘦改小x轴值
（三）盒子阴影
1.样式名
box-shadow
2.取值
按顺序写，水平和垂直阴影必写，选写的根据需要写
box-shadow：水平 垂直 模糊 尺寸 颜色 内外(默认为outset外阴影，inset内阴影)
3、注意
①模糊不能设负值
②水平和垂直指的是阴影的位置，水平负值是左边，垂直负值是上边
③内外指的是阴影在盒子的内还是外
（四）文本阴影
1.样式名
text-shadow
2.取值
按顺序写，水平和垂直阴影必写，选写的根据需要写
box-shadow：水平 垂直 模糊 颜色
制作3D字体时，可以采用书写多个阴影，只需要在后面加逗号接着写
css
text-shadow:1px 1px rgba(197,233,248,0.8),
2px 2px rgba(197,233,248,0.8),
3px 3px rgba(197,233,248,0.8),
4px 4px rgba(197,233,248,0.8),
5px 5px rgba(197,233,248,0.8);3、注意
①模糊不能设负值
②尺寸大小和font-size的大小一致
（五）不透明度
1.设置的方式
①opacity：.4;
②background-color：rgba(100,200,100,.4)//red green blue opacity
2.相同点
取值范围0-1, 0完全不可见/完全透明，1完全可见/完全不透明，都用于做蒙版效果
3.不同点
①opacity是个单独的样式，rgba()只是背景色的一种取值方式
②opacity影响背景和里面的内容，rgba()只影响背景不影响内容
4、注意
（六）2D或3D转换
1.样式名
transform 2D或3D转换
2.取值
不同取值有不同的效果
（1）移动/位移
①translate（x,y）沿着x轴和y轴移动
②translateX（x）沿着x轴移动
③translateY（y）沿着y轴移动
括号里的x,y可以传px单位的值，%，灵活单位如em vw等
特点：可以移出父级，仍在标准文档流中，原位置保留
（2）旋转
①rotate（ndeg）沿着x轴和y轴同时旋转n度
②rotateX（ndeg）沿着x轴转动，
③rotateY（ndeg）沿着y轴转动
n是数字，可正可负，正数表示顺时针旋转，负数表示逆时针旋转，deg是单位
（3）缩放
①scale（x,y）对宽度缩放x倍，对高度缩放y倍
②scaleX（x）对宽度缩放x倍
③scaleY（Y）对高度缩放y倍
markdown
**缩小**：
0<倍数<1 缩小
-1<倍数<0 翻转缩小
**放大**：
倍数>1 放大
倍数<-1 翻转放大
临界值：1 原本大小 0 没有/隐藏 -1 翻转仍为原来大小（4）倾斜/拉伸L(改变图形形状)
①skew（ndeg）沿着x轴和y轴同时倾斜/拉伸n度
②skewX（ndeg）沿着x轴倾斜，
③skewY（ndeg）沿着y轴倾斜
lua
n是数字，可正可负，正数表示拉着左上角和右下角在水平方向或者在垂直方向拉伸，负数拉着右上角和左下角在水平方向或者在垂直方向拉伸，deg是单位
skew表示倾斜的角度，可以是一个值也可以是两个值
//一个值时只代表x轴方向的倾斜，两个值时，第一个值表示x轴方向(左右边)上的边倾斜，第二个值表示Y轴方向(上下边)上的边倾斜
//例子中0deg表示x轴水平方向上的边不倾斜，20deg表示y轴方向上的上下边倾斜20deg
transform: skew(0deg,20deg);（七）transform-origin基点
1.样式名
transform-origin
2.取值
①px单位的长度值
②%
③用关键词 水平方向：left center right 垂直方向：top center bottom
注意：z轴只能用①
3.作用
在2D和3D的转换效果中，确定不动的点在哪里，默认值都是中心点（矩形对角线的交点）
注意：如果是父元素定了基点，那么子元素的基点在不设置的情况下默认和父元素一样
（八）3D效果必须在父级添加的样式
1.transform-style：preserve-3d；//写在父级内
转换效果按照3D效果展示------搭建3D舞台
2.perspective：1000px；
元素离视图的距离、透视------视角
（九）渐变
注意:ie浏览器10之前都不支持
1.定义
背景在两种或多种颜色之间平滑的过渡。
注意：它由浏览器生成，可以写background：渐变 或者 background-image：渐变，本质是图片
2.分类
线性渐变，径向渐变两种
3.线性渐变
①默认是从上往下的方向进行平均渐变
arduino
background：linear-gradient（颜色1，颜色2，颜色3....） ②方向词指定最后一个颜色的方向(线性渐变的方向)
css
//设置渐变的方向时有两种写法
//第一种只需在第一个参数值里写上to方向，一般都是to top/bottom/left/right
background：linear-gradient（to 方向词，颜色1，颜色2，颜色3....）
//第二种是在第一个参数值里写上角度，270deg(向左)、90deg(向右)、0deg(向上)、180deg(向下)
background：linear-gradient（角度，颜色1，颜色2，颜色3....） ③颜色后面可以跟百分比或者像素，但渐变百分比的值后一个要比前一个大
arduino
//重复的线性渐变，注意重复的线性渐变一定要写色标分布值
background：repeating-linear-gradient（颜色1 %，颜色2 %，颜色3 %....）
css
eg：案例中的百分比表示的是orange颜色占50%此时不渐变，过了百分之50的时候开始渐变直到100%
background-image: linear-gradient(to left,orange 50%,green 100%);④注意渐变的兼容性前缀一定要写在渐变的前面，而不是背景前，并且要保留最基础的渐变
css
background-image: linear-gradient(to left,orange 50%,green 100%);
background-image: -webkit-linear-gradient(to left,orange 50%,green 100%);4.径向渐变
①默认是均匀由内到外以圆形的渐变
arduino
background：radial-gradient（颜色1，颜色2，颜色3....） ②方向词指径向渐变的方向，默认由内向外进行径向渐变
改变径向渐变的方向只需在第一个参数值里写上:渐变方式 at 方向词
css
//渐变方式有circle正圆和ellipse椭圆两种,方向词有top，center，right，left，bottom
background-image: radial-gradient(circle at right,orange,green);注意：在写方向词时，可以写两个
css
//例如：top left表示左上角，且两个方向词的顺序可以随意
background-image: radial-gradient(ellipse at top left,orange,green);③径向渐变不均匀分布的写法
重复的径向渐变：可以用百分比也可以用像素值，注意重复的径向渐变一定要写色标分布值
arduino
background：repeating-radial-gradient（颜色1 %，颜色2 %，颜色3 %....） 正圆：写不均匀渐变分布时，需在第一个参数的第一个值写上分布大小的像素值，特别注意不能用百分比
arduino
//由内向外的径向渐变,例子中20%表示到20%时orange颜色已经渐变完成，后面接着为green且不渐变
background-image: radial-gradient(20px circle at center,orange,green);椭圆：注重区分x轴和y轴上的大小，所以在写不均匀渐变分布时一定要写上x轴上和y轴上分布大小的像素值，特别注意不能用百分比
arduino
//由内到外的径向渐变，例子中50px表示x轴上的分布大小，30px表示y轴上的分布大小
//x轴的值大于y轴上的值，效果为横向的椭圆径向渐变，y轴的值大于x轴的值，效果为竖向的椭圆径向渐变
background-image: radial-gradient(50px 30px ellipse at center,orange,green);④外层盒子影响内部径向渐变的方式的情况
外层盒子是长方形时径向渐变默认是由内到外的椭圆
arduino
background-image: radial-gradient(颜色1，颜色2，颜色3....);
//效果同上
background-image: radial-gradient(ellipse at center,颜色1，颜色2，颜色3....);
//加circle径向改为由内到外的正圆
background-image: radial-gradient(circle,颜色1，颜色2，颜色3....);外层盒子是正方形时径向渐变默认是由内到外的正圆
arduino
background：radial-gradient（颜色1，颜色2，颜色3....）
//效果同上
background：radial-gradient（circle，颜色1，颜色2，颜色3....） （十）过渡 transition
只能用于简单地需要交互效果的动画
1.定义
同一个样式名，样式值从一种逐渐变成另一种
2.简写、复合样式名
transition：样式名 花费时间 时间曲线 等待时间
没有顺序要求，但浏览器会以看到的第一个时间为花费时间，样式名 花费时间必写，其余选写
等待时间指的是：当改变元素属性值后多长时间开始执行；
注意:all表示全部样式
3.单独样式
①transition-property 样式名
默认值是none 表示没有过渡，
all 表示所有样式名都可以过渡
某个样式名 width等，表示只有这个样式有过渡效果
②transition-duration 花费的时间 正数
默认值是0，表示没有过渡，
取值可以是秒 s 如3s 或者是毫秒 ms 1s=1000ms
③transition-delay 等待时间(常用.2s)
默认值是0，表示没有等待直接开始，
取值可以是秒 s 如3s 或者是毫秒 ms 1s=1000ms
可以为正也可以为负，为正表示等待多长时间开始过渡，为负表示提前多久开始过渡
④transition-timing-function 时间函数
developer.mozilla.org/zh-CN/docs/...
默认值是 ease 先慢再快再慢，类似开车效果
linear 匀速
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 以慢速开始和结束和ease效果一样
step-start 过渡效果失效
step-end 在花费时间结束时开始过渡效果
（十一）动画
可以实现复杂的动画
1.定义
动画是复杂的过渡，过渡是简单的动画
动画分为创建动画和调用动画
2.创建动画
语法：(动画名字要有意义，分段是根据需要分多段，样式声明可以写一条或多条)
ruby
@keyfram0es 动画名字{
from{ css样式声明}
to{css样式声明}
}
按百分比作为动画执行的阶段时，百分比可以随意设置，一般为了效果百分比会均匀分配
@keyfram0es 动画名字{
0%{ css样式声明}
50%{css样式声明}
100%{css样式声明}
}3.调用动画(复合写法)
语法：(name和是duration必写，其余选写)
css
animation： name duration timing-function delay count direction
调用函数关键词 动画名 延续时间 时间函数 动画执行前延迟的时间 动画执行的次数 动画的执行方向 eg：
arduino
animation: move 5s ease 2 linear 2000ms infinite alternate
调用 move动画 5s内完成 先慢再快再慢 执行2次 匀速 等2s后开始 循环播放 正反方向轮流执行4、单独设置要调用的动画
①animation-name
调用的动画名
②animation-duration
延续的时间
③animation-timing-function
动画执行的时间函数
sql
默认值是 ease 先慢再快再慢，类似开车效果
linear 匀速
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 以慢速开始和结束和ease效果一样
step-start 过渡效果失效
step-end 在花费时间结束时开始过渡效果④animation-delay
动画执行前的延迟时间
可以为正也可以为负，为正表示等待多长时间开始执行动画，为负表示提前多久开始执行动画
⑤animation-iteration-count
动画重复执行的次数
值infinite表示无限循环
⑥animation-direction
动画执行的方向(不常用)
值normal表示正常顺序执行动画，没有任何变化
值alternate表示动画在正常顺序执行一次后紧接着反向执行一次
(十二)伪类选择器
1、动态伪类选择器(交互时进行的样式渲染)，常用于a标签
①:link 在默认情况下标签
②:visited 已经访问过的标签
③:hover 鼠标进入的标签
④:active 鼠标左击选中不放时候的标签
2、UI元素状态伪类选择器，常用于input标签
①:enabled 可以状态
②:disabled 不可用状态
③:checked 已选中
3、结构伪类选择器
①:first-child 选择某个元素的第一个子元素
②:last-child 选择某个元素的最后一个子元素
③:nth-child(n) 选择某个元素的一个或多个特定元素(常用)
css
//.demo li:nth-child(2n)、.demo li:nth-child(even)选中偶数行
//.demo li:nth-child(2n+1)、.demo li:nth-child(odd)选中奇数行④:nth-last-child() 选择某个元素的一个或多个特定元素，从这个元素的最后一个子元素开始算
⑤:nth-of-type() 选择指定的元素中的某元素的一个或多个
⑥:nth-last-of-type() 选择指定的元素中的某元素的一个或多个,从这个元素的最后一个元素开始算
⑦:first-of-type 选择指定的元素中的第一个元素
⑧:last-of-type 选择指定的元素中的最后一个元素
⑨:only-child 选择的元素是它的父元素下的唯一一个子元素
⑩:only-of-type 选择指定的元素是它的父元素下的唯一一个子元素
:empty 选择的元素里面没有任何内容
(十三)伪元素
1、定义
用于向某些选择器设置特殊效果
2、作用
使内容和样式分离
3、伪元素
①::first-letter 选中一段话的第一个文字
scss
常用案例：(让一段文字的首个文字变大加粗下沉)
.demo::first-letter{
font-size:40px;
font-weight:bold;//文字加粗
float:left;//想要文字下沉必须写浮动
}②::first-line 设置文字的第一行的样式
③::before 在选择的某元素前面添加内容
css
.demo::before{
content:url(./tu.png);//必写元素，可以是路径,如果没有内容直接写个引号
}④::after 在选择的某元素后面添加内容
css
.demo::after{
content:url(./tu.png);//必写元素，可以是路径,如果没有内容直接写个引号
}Happy Ending
好啦！下次见啦！