css3

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; 系数