三、css3

css3新增样式

• 盒子居中
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
• border-radius:圆角
• box-shadow: 5px 5px 20px 0 #000
  inset/可不写:不写是外阴影,inset是内阴影
  X轴偏移值
  Y轴偏移值
  阴影模糊度
  阴影的扩展半径
  阴影的颜色
• text-shadow:文字阴影
• -webkit-filter: blur(5px); 设置模糊度：0~10 10是完全模糊
• -webkit-filter: grayscale(1); 灰度：0~1
• -webkit-filter: invert(1); 反色:0~1
• -webkit-filter: sepia(0.5); 叠加褐色:0~1
• 传统css背景样式:
• background-color: pink;
• background-image: url("img/baby.jpg");
• background-repeat: no-repeat;
• background-position: -10px -10px;
• background: url("img/baby.jpg") no-repeat;
• CSS3中的背景样式:
• background-size: 100% 100%;当前盒子有多大，背景图片就有多大，这样设置可能会导致图片变形
• background-size: 100%;让背景图片的宽度和容器的宽度保持一致,高度自适应
• background-size: cover;以最适合的比例，让图片铺满整个屏幕，但是可以保证图片不变形,一般应用于大一点的背景图
• background-origin: border-box; 设置背景图片平铺的起点：border-box从边框开始设置背景图 padding-box：默认值,从padding开始 content-box:从内容开始
• background-clip: padding-box; 背景图片裁切 border-box padding-box content-box

css3选择器

• .box li:nth-child(3)
• .box li:nth-child(odd)
• .box li:nth-child(even)
• .box li:nth-last-child(3)
• .box li:nth-child(3n+1) n=0、1、2...时3n+1的值
• .box li:nth-child(3n+2)
• .box li:nth-child(3n)
• .box li:active
• .box li:not(:nth-child(10)) 括号中放入的是条件：一个新的选择器
• .box div:nth-child(2)它的意思不是子元素中DIV中的第二个，它的意思是所有子元素中的第2个，并且第二个还需要是个DIV才可以
• .box div:nth-of-type(2) 它是先按照DIV分组，找到这个分组中的第二个，这样的话我们查找起来会更方便; nth-last-of-type...
  注意：

以下属性在应用时需要写5套以适应不同的浏览器环境，如：
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);

css3变形：transform

• translate(X|Y|Z):位移， 多个变形效果空格隔开
  -webkit-transform:translate(100px,100px);
  -webkit-transform:translateX(100px)
• scale(X|Y|Z)：缩放
  -webkit-transform:scale(1.2);//放大1.2倍
• skew(X|Y|Z)：倾斜
  -webkit-transform:skew(45deg);//倾斜45度数
• rotate(X|Y|Z):旋转,沿着轴线进行旋转
  -webkit-transform:rotate;
• matrix:矩阵变形，自己设置矩阵公式，让其按照制定的轨迹和方式进行变形
• transform-origin:变形基准点，默认是center
  =>transform不是动画，它是给元素设置变形的效果，在不考虑兼容的情况下，尽量使用transform实现元素的变形和位移，因为它开启了设备的硬件加速，性能和体验都强于传统的css样式改变
  =>transform不兼容ie低版本浏览器（ie9及以下以下）

css3过度动画：transition

我们设置一个过度的规则和效果，当元素样式发生改变时，会按照这个规则运动
-webkit-transition: [property] [duration] [timing-function] [delay] ;(属性 时间 时间函数 延时)

• property：设置元素的哪些样式在改变后执行这个过度规则，默认是all，即所有样式改变都会执行这个规则，若写width，则只有在width发生改变时才按照这个规则
• duration：设置动画运动的总时间
• timing-function：设置动画运动的方式，默认值是linear，除此还有ease、ease-in、ease-out、ease-in-out...
• delay：设置延时事件，默认是0s，如果设置为1s，当需要运动时，延时1秒后再执行

css3帧动画：

@-webkit-keyframes [name]{
from{ //0%,开始帧位置
}
25%{}
50%{}
100%{}
}

-webkit-animation:[name] [duration] [timing-function] [delay] [count][fill-mode];
[name]：动画名称
[duration]：运动时间
[timing-function]：运动方式
[delay]：延迟时间
[count]：运动次数，infinite无限次运动
[fill-mode]：
forwards:当元素按照轨迹运动完成后，停留在最后一帧的位置，不设置则动画完成后元素立马回到第一帧的位置
backwards:如果本次动画有延迟，则在延迟时间到时，元素处于第一帧的位置，不设置则是处于当前位置
both:以上两者兼具

=>真实项目中我们自己一般不写帧轨迹，而是使用animate.css轨迹库实现我们的需求:https://daneden.github.io/animate.css/

css3盒子模型

• box-sizing: content-box; width height 指定为内容
• box-sizing: border-box; width height 指定为整个盒子，不论padding和border大小，其整体大小不变
• 多列布局
• columns:100px 3;规定宽度和列数