CSS3

• 浏览器前缀
  • -webkit-transition:1s;
  • -moz-transition:1s;
  • -o-transition:1s;
  • js中的写法
    • WebkitTransition
    • MozTransition
    • OTransition
• 选择器
  • 属性选择器：
    • **p[attr]{};
    • **p[attr=leo]{};
    • p[attr~=leo]{}; //属性值是一个由空格隔开的词列表，词列表中包含了一个value值为leo。
    • p[attr^=leo]{}; //属性值由leo开头
    • p[attr$=leo]{}; //属性值由leo结束
    • p[attr*=leo]{}; //属性值包含leo
    • p[attr|=leo]{}; //属性值由leo-开头，或者单纯的leo
  • 结构选择器
    • **p:nth-child(n){}; //p的父级下的第n个子节点（并且必须是p标签）；！n计数从1开始；odd（奇数）even（偶数）；n可以是一个算式（eg：2n-1）；
      • 如果想找到p的父级（body）下的任意第n个子节点不关心是什么标签
      • body *:nth-child(n){};
    • nth-last-child(n){}; //从后向前数；
    • **p:nth-of-type(n){}; //与nth-child(n)区别是，它只会寻找p标签，忽略非p标签。
    • **p:nth-last-of-type(n){}; //反向；
    • first-child===nth-child(1);
    • last-child===nth-last-child(1);
    • first-of-type===nth-of-type(1);
    • last-of-type===nth-last-of-type(1);
    • p:empty{}; //找空标签；
    • p:only-of-type; //只有p一个子节点；
    • p:only-child; 
    • **//注意child和of-type的区别；
  • 伪类
    • div：target {}//哈希值对应的对象
    • input：disabled{}; //不可编辑
    • input:enabled{}； //可编辑
    • **input:checked{}; //选中的复选框
    • **p~h1 //选择p后面的兄弟标签中的h1标签；
      • input:checked{}与p~h1; //做模拟的单选框；
    • p:first-line{}; //第一行文字；
    • p:first-letter{}; //第一个文字或者字母；
    • p::selection{}; //选中状态的文本效果；
    • p::after/before{ content:'value'}; //after或者before通过content添加内容，并可以设置样式；
    • p:not(css选择器);//选中除了括号中选择器指向的元素以外的元素。
• 样式　
  • rgba（0,0,0,0.5）; //解决了需要背景同名而内容不透明的情况；
  • text-shadow:x y mohu color ;//文字阴影
    • text-shadow:x y mohu color ,x2 y2 mohu color; //多层阴影，逗号隔开，后面被前面的覆盖；
  • -webkit-text-stroke:3px red; //文字描边。自由webkit内核才支持的属性。
  • 两个全兼容的文本编辑样式
    • direction:rtl; //右对齐
      • 配合unicode-bidi:bidi-override; //让本文的读写顺序变成从右到左。
      • text-overflow:Ellipsis //超出显示省略号;
  • 自定义字体
• 弹性盒模型(加浏览器前缀)
  • 新增属性：display:-webkit-box;/display:-webkit-inline-box;
  • -webkit-box-orient:horizontal(默认)/vertical;定义盒模型布局方向；
  • -webkit-box-direction:normal /reverse; //正序、倒序；
  • -webkit-box-ordinal-group:n; //设置元素的任意位置； 
  • -webkit-box-flex:n; //子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和；
  • -webkit-box-pack:start/center/end/justify; //富裕空间管理；类似于左浮动，居中，右浮动,均布；（未知宽高的盒子水平居中（box-pack/text-align））
  • -webkit-box-box-align:start/center/end； //垂直方向的富裕空间管理；
• 盒模型新增属性
  • box-shadow:(inset),x,y,mohulength,(扩展半径),color;　//inset：表示内阴影；　　
    • 同样可以设置多重阴影，用逗号隔开；
  • -webkit-box-reflect:above/blow/left/right (length) (渐变); //倒影；
  • resize:both/horizontal/vertical/;(需要配合overflow:auto一起使用才有效果) ；
  • box-sizing:content-box(标准盒模型)/border-box（怪异模式） //怪异盒模型；
• 响应式布局
  • 分栏布局
    • column-width 栏目宽度
    • column-count 栏目列数
    • column-gap 栏目距离
    • column-rule 栏目间隔线
• ui特性
  • border-radius:
    • 圆角：border-radius:左上 右上 右下 左下；//可以用百分比，更加方便（移动端慎用百分比，可能会有兼容性问题）；
    • 椭圆：border-radius:x1/y1 x2/y2 x3/y3 x4/y4; //分别设定x轴，y轴的半径。
  • 边框背景
    • border-image:url(所用背景图路径) 上下切片大小（不加px单位） 左右切片大小（不加px单位） round/repeat/stretch(上下填充方式)  round/repeat/stretch(左右填充方式)； //牢记九宫格切片模式；webkit内核下中间也会进行填充，标准不明确；
    • border-20px; //配合border-image使用；
  • 线性渐变
    • 线性渐变：background-image:-webkit-linnear-gradient(起始角度,  color1 30px/10%,color2 60px/30%,color3 100px/100%);
    • 线性渐变-平铺：background-image:-webkit-repeating-linnear-gradient(起始角度  color1 30px/10%,color2 60px/30%,color3 100px/100%);
    • //通过平铺的线性渐变配合transition做出滚动条的效果。
    • ie10一下的渐变：filter:一大串。
  • 径向渐变
    • background-image:-webkit-linnear-gradient(起始角度, ,(形状),  color1 30px/10%,color2 60px/30%,color3 100px/100%);　　
  • 背景
    • background:url(bg1) on-repeat left top,url(bg2) repeat-y right top;
    • 多背景的情况下，设置各种属性是通过逗号隔开的。backgroud-position：100 0,0 0;
    • 背景尺寸:background-size:100px/30% 200px/50%;
      • background-size:cover/contain; //两个关键字；
    • 背景图原点设置
      • background-origin:border-box/padding-box/content-box; //从border/padding/content区域开始显示背景；
    • 边框透明但是不想显示背景:background-clip:border-box/padding-box/content-box/text; //text(在文本内填充图案)；iphone解锁文字的光斑效果；
    • 遮罩
      • -webkie-mask:url(遮罩图片/用的是形状。相当于蒙版。)  no-repeat  right 0//位置 
  • 2d变换和动画
    • transition过渡
      • 基本transition:time(s/ms) attr(需要过渡的属性width/background/all) 过渡形式(ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier(x1,y1,x2,y2))
      • 每个attr单独的参数:transition:1s width,200ms height;
      • 延迟执行：transition:1s 2s width; //宽度延迟2s执行；
    • transitionend事件
      • 火狐下：标准事件格式transitionend;
      • 谷歌下:WebkitTransitionEnd;
    • 2d变换
      • 旋转：-webkit-transform:rotate(30deg); //顺时针旋转30度；
      • 斜切：-webkit-transform:skewX/Y/(15deg,30deg); //x斜切15度，y斜切30度；
      • 缩放：-webkit-transform:scaleX/Y/(0.5，0.8); //x轴缩放为0.5倍，y轴缩放为0.8倍；
      • 位移：-webkit-transform:translateX/Y/(100px -200px); //右移100，上移20；
      • 变化基点：-webkit-transform-origin:left top/10px 50px; //变化几点为左上角/10px 50px 的位置；
      • ！transform的特点是后写的先执行。
  • 3d变换和动画
    
    • -webkit-transform-style:preserve-3d; //创建3d空间；
    • -webkit-perspective:200px; //景深；视点离景物的距离；
    • -webkit-transform:rotateX/rotateY/rotateZ(相当于普通的旋转 );
    • -webkit-transform:translateZ(100px) ;//前后移动，会有近大远小的效果，相对于景深。