css3 选择器
o 属性选择器
[属性名] 可以选择到官方或者自定义的属性
[属性名="属性值"] 匹配属性值
[属性名~=""] 包含该值必须单独出现的
[属性名*=""] 只要包含该值就行
[属性名^=""] 以该值开头
[属性名$=""] 以该值结尾
o 伪类选择器
构性伪类选择器（child 系列）
1.E:first-child E 必须是父元素里面的第一个孩子
2.E:last-child E 必须是父元素里面的最后一个孩子
3.E:**nth-child(n)** 不匹配前面的元素类型，如果对应的位置是该元素才匹
配
4. E:only-child 必须只有他自己一个孩子
结构性的伪类选择（type 系列）
1.E:first-of-type 匹配到该元素中的第一个孩子
2.E:last-of-type 匹配到该元素的最后一个孩子
3.E:**nth-of-type(n)** 匹配到该元素的第几个孩子 n 可以是表达式 2n 3n
2n+1 even(偶数) odd(奇数)
4.E:nth-last-of-type(n) 匹配到该元素的倒数第几个
目标伪类：结合锚点使用
状态伪类选择器
1.:enabled 元素可编辑
2.:disabled 元素不可编辑
3.:checked 选中
4.::selection 高亮状态一般修改字体颜色和背景色
动态伪类选择器
1.:link 未访问前
2.:visited 访问过后
3.:hover 鼠标滑过
4.:active 鼠标点击之后
层级选择器
后代选择器选择器选择器
子项选择器选择器>选择器
相邻的兄弟选择器+选择器紧挨着的兄弟
相邻的兄弟们选择器~选择器紧挨着的弟弟们
o css3 属性
阴影
1. box-shadow:x 轴偏移 y 轴偏移模糊距离阴影的颜色阴影的位置
（outset/inset）;
12
2. text-shadow:x 轴偏移 y 轴偏移模糊距离阴影的颜色;
透明
rgba 设置透明度
里面的内容不会被模糊
opacity:0-1; 0 完全透明 1 不透明
1.里面的内容也会被模糊
2.可以设置图片的模糊
3.过渡效果对 display 的隐藏和出现没有效果，可以通过设置 opacity
的值
背景
背景图的原点 background-origin
1.padding-box 默认值背景图从 padding 区域开始显示
2.content-box 背景图从 content 区域开始显示
3.border-box 背景图从 border 边框区域开始显示
背景图的裁切 background-clip
1.border-box 边框之外裁切
2.padding-box padding 之外裁切
3.content-box 内容区开始裁切
背景图大小的设置 background-size
圆角 border-radius
1.一个值四个角
2.两个值对角
3.三个值左上角右上角/左下角右下角
4.四个值左上角右上角右下角左下角（顺时针的角度）
5.正圆 border-radius: 50%/100%;
图片边框 border-image
1.border-image:图片路径偏移重复
2.border-image-source:url() 图片的路径
3.border-image-slice:数值图片的裁切不要加单位
4.border-image-repeat:平铺(repeat) 铺满(round) 拉伸(stretch)默认
过渡 transition：transition-property transition-duration transition-delay
transition-timing-function(顺序不固定，当只有一个时间的时候，表示
过渡时间，两个时间第一个表示过渡时间，第二个表示延迟时间)
transition-property 需要过渡的属性
transition-duration 过渡所需要的时间 s(秒)/ms(毫秒) 1s=1000ms
transition-delay 过渡延迟时间 s(秒)/ms(毫秒)
transition-timing-function 过渡效果
1.linear: 匀速
2.ease: 逐渐慢下来
3.ease-in: 加速
4.ease-out: 减速
5.ease-in-out 先加速后减速
动画 animation：animation
使用：animation: 动画名动画持续时间延迟时间动画效果执行次数
13
animation-name: 动画名
animation-duration: 动画的持续时间 s/ms
animation-delay: 动画的延迟时间 s/ms
animation-timing-function: 动画的效果
animation-iteration-count: 具体的数值/infinite(无限循环)
anmiation-direction: 动画执行的方向
1.normal 正向
2.reverse 反向
3. alternate 正向和反向交替运动
animation-play-state 动画是否播放
1.running 播放默认值
2.paused 暂停
定义动画
css
@keyframes 动画名{ from{} ==>0% to{}==>100%
}
关键帧分的是时间
@keyframes 动画名{
0%{ css 属性:css 属性值
}
10%{} 0.5s
20%{} 1s
30%{}
100%{}
}
渐变
线性渐变
background-image/background:linear-gradient(方向,颜色 1,颜色 2……)
渐变方向
to bottom 向下
to right 向右
to top 向上
to left 向左
to right bottom 向右下角
to left top 向左上角
to right top 向右上角
to left bottom 向左下角
数值+deg(角度)
设置百分比
css
/* 0%-40% 是红色的纯色 40%-60% 红色到蓝色渐变
60%-100% ；蓝色的纯色*/
14
background: linear-gradient(red 40%, blue 60%);
重复性的线性渐变
background:repeating-linear-gradient(red 40%, blue 60%);
径向渐变
bakrgound-image/background:radial-gradient(位置,颜色 1,颜色 2)
位置
center 中心
水平方向：left/center/right
垂直方向：top/center/bottom
兼容写法
css background: radial-gradient(left, red, blue);
background: -webkit-radial-gradient(left, red, blue); background: -
ms-radial-gradient(left, red, blue);
重复性的径向渐变
background: repeating-radial-gradient(red 20%, yellow 40%)
