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;规定宽度和列数
