1.属性选择器 IE6以下不兼容
li[class] 有属性
li[class=abc] 属性和值是否相等 "abc"
li[class~=abc] 包含 "abc ab"
li[class^=abc] 首字母
li[class$=abc] 尾字母
li[class|=a] 以值开头的元素、后面是中划线的
li[class=abc] 字符串中有值
2.伪类选择器
*obj:nth-child(1) 选择某一个
obj:nth-child(odd) 奇数
obj:nth-child(even) 偶数
obj:nth-child(n) 全部
obj:nth-child(2n) 几倍数
obj:nth-last-child(2) 从后往前数
obj:first-child 第一个
obj:last-child 最后一个
input:focus 获取焦点
p:only-child 父级下只能存在一个元素
div:empty 空元素
input:enabled 可用
*input:disabled 不可用
::selection 选择的文本样式
*:root 根元素 html
*css3新增的样式
1.圆角
border-radius 规律和margin类似（top看成left top）
50% 正圆 单位都可以用
一个值 四个方向
两个值 左上/右下 右上/左下
三个值 左上 右上/左下 右下
四个值 左上 右上 右下 左下 顺时针
2,过渡
transition:1s all ease;
1s 运动时间
all 运动样式
ease 运动类型
3.浏览器规则
chrome 谷歌
-webkit-
firefox 火狐
-moz-
ie IE
-ms-
opera 欧朋
-o-
不加前缀 标准
4.文字阴影
text-shadow:1px 1px 2px #000;
x
y
模糊度
阴影颜色
颜色表示方法2
rgba(0,0,0,0.1)
r red
g green
b blue
a alpha
5.文字描边
-webkit-text-stroke:2px red;
描边宽度
描边颜色
6.块阴影
box-shadow:0px 0px 10px [10px] #000 [inset];
x
y
模糊度
扩充阴影值
颜色
内阴影
7.渐变
线性渐变
background:-webkit-linear-gradient(left,red,green)
left top right bottom /45deg 角度
red起始颜色
green结束颜色
重复渐变
background:-webkit-repeating-linear-gradient(-45deg,red 0,red 10%,blue 10%,blue 20%);
径向渐变
background:-webkit-radial-gradient(red,green);
8.普通元素可编辑
contenteditable="true"
9.蒙版
-webkit-mask:url(../img/meizi.jpg) no-repeat x y;
10.背景图大小
background-size:width height; px
contain 以最小值为准
cover 以最大值为准
11.多个背景图
background:url,url,url,url;
12.背景图生效位置
background-origin:border-box; 边框生效位置
background-origin:content-box; 内容生效位置
background-origin:padding-box; 默认位置
13.文本开切位置
-webkit-background-clip:text;
color:rgba(0,0,0,0); 配合使用
14.倒影
-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1));
below 向下
above 向上
left 向左
right 向右
10px 间距
15.滤镜
-webkit-filter:blur(0px);
16.缩放大小
resize:both;
resize:both; overflow:hidden;
17.文本排序
direction:rtl; unicode-bidi:bidi-override;
18.变形
transform:
rotate 旋转度数 deg
translate(x,y) 平移像素 px
scale(x,y) 缩放比例
skew(x,y) 倾斜度数 deg
变形样式是从后往前读
transform:skew(30deg,10deg) scale(2,2) translate(100px,20px) rotate(45deg);
19.旋转控制中心点
transform-origin:x y;
left
right
top
bottom
20px 20px
景深：
transform:perspective(800px);
perspective:800px;
3d 加给父级 不能继承:
transform-style:preserver-3d;
变形
transform:
scale X Y
rotate X Y Z
translate X Y Z
skew X Y
20.媒体查询：
@media (条件){语句}
@media screen and (条件) {语句}
@media screen and (条件) and (条件) {语句}
<link href="" rel="stylesheet" media="(条件) and (条件)" />
判断运动结束
transitionend
obj.addEventListener('transitionend',fn,false);
21.高级运动
自定动画
@keyframes test{
from{}
to{}
0%{}
100%{}
}
animation:test linear 1s infinite;
animation-duration:1s; 运动时间
animation-name:test; 名字
animation-timing-function:linear; 运动形式
animation-iteration-count:2; 运动次数
infinite 无限次数
animation-delay:2s; 延迟执行
animation-play-state:paused; 暂停
22.弹性盒子
父级
display:flex;
子级
flex:1; 系数
