CSS3学习要点

为了浏览器兼容问题，所以需要在css3的一些新的style方法中加前缀
例如：border-radius

-webkit-border-radius//google
-moz-border-radius//foxs
-ms-border-radius//IE
-o-border-radius//Oprea

一、选择器的变化

类似jquery的选择器
新增了属性选择器
位置选择器
伪类选择器

选择器	说明
::before	在元素里的最前面
::after	在元素里的最后面
::selection	被选择的元素
::first-line	第一行文本
::root	元素的根元素

二 、边框与圆角

border-radius	圆角边框	设置四个值顺序为左上、右上、右下、左下
box-shadow	阴影	六个值 ，水平阴影、竖直阴影、模糊、扩展（向四周）、颜色、inset（内部模糊）
border-image	边框图片	六个值 ，文件路径、切分、宽度、扩展、是否重复

三、转换（transform）

-webkit-transform//google
-moz-transform//foxs
-ms-transform//IE
-o-transform//Oprea

1. 2D转换

方法	定义	属性说明
transform:rotate(8deg)	旋转	正数为顺时针,负数为逆时针，deg表示角度
transform:translate(x,y)	偏移	可分为transform:translateX(x)和transform:translateY(y)
transform:scale(x,y)	缩放	可分为transform:scaleX(x)和transform:scaleY(y)，值不需要单位，是比例
transform:skew(8deg)	斜切扭曲	正数为逆时针,负数为顺时针，可分为transform:skewX()和transform:skewY()，值为角度

2. 3D转换
   

方法	定义	属性说明
transform:rotate3d(x,y,z,角度)	旋转	x,y,z非0表示该轴参与旋转，否则写0.正数为顺时针,负数为逆时针，deg为角度单位，可分为transform:rotateX(角度)、transform:rotateY(角度)、transform:rotateZ(角度)
transform:translate3d(x,y,z)	偏移	可分为transform:translateX(x)、transform:translateY(y)和transform:translateZ(z)
transform:scale3d(x,y,z)	缩放	可分为transform:scaleX(x)、transform:scaleY(y)和transform:scaleZ(z)，值不需要单位，是比例

3. 扩展

方法	定义	属性说明
transform-style:flat/preserve-3d	嵌套元素展现形式	默认为flat不互相干涉，preserve-3d会产生嵌套效果
backface-visibility:visible/hidden	元素背向用户时是否可见	默认visible可见，hidden不可见

四、过渡

在时间区域内平滑的过渡

方法	定义	属性说明
transition-property:none/all/属性名	加过渡效果的属性	默认为all,可以写color等属性名
transition-duration:time/0	过渡效果的持续时间	设置的time值，默认是0
transition-timing-function:很多	过渡效果的动画类型	ease:平滑过渡；linear:线性过渡；ease-in:由慢到快；ease-out由快到慢；ease-in-out由慢到快到慢
transition-delay:time/0	过渡效果的延迟时间	设置的time值，默认是0

简写：transition：property duration timing-function delay,其中duration是必需的

五、动画（animation）

手机的浏览器在使用CSS3动画时，要加上webkit前缀

1. 相关方法

方法	定义	属性说明
animation-name:none/选择器的关键帧	检索或设置对象的动画名称
animation-duration:time/0	检索或设置动画的持续时间	设置的time值，默认是0
animation-timing-function:很多	检索或设置动画的类型	ease:平滑过渡；linear:线性过渡；ease-in:由慢到快；ease-out由快到慢；ease-in-out由慢到快到慢
animation-delay:time/0	检索或设置动画的延迟时间	设置的time值，默认是0
animation-iteration-count:次数/infinite（无限次）	检索或设置动画的循环次数	默认为1
animation-direction:normal/reverse/alternate/alternate-reverse	检索或设置动画在循环中的方向	必须先有循环
animation-fill-mode:none/forwords（动画结束时的状态）/backwords（动画开始时的状态）	动画未播放时的状态
animation-play-state:paused/running	动画暂定或运行	默认为running

简写：animation：**name duration** timing-function delay iteration-count direction fill-modeplay-state

2. 关键帧（@keyframes）
   规定动画：逐步改变一个CSS样式到另一个CSS样式，CSS调用@keyframes来产生动画

@keyframes 帧名{
	动画持续百分比（0-100%）{
		css-styles;
	}
}

如果要设置百分比为0时，可以用from表示，为100%时，可以用to表示

3. 动画优化方法
   （1）position-fixed替代background-attachment
   （2）带图片的内容放在伪元素中
   （3）will-change：提前告诉浏览器元素将要做什么动画，让浏览器准备

六、多列布局

制作分列布局至少需要column-count和column-gap

属性	说明
column-count	列数
column-gap	列之间的间距
column-rule-style	定义列之间分割线的风格
column-rule-width	分割线宽度