CSS 3 新属性

css3新增加的一些属性

• border-radiu 圆角
• border-image 边界图片
• box-shadow 盒阴影
• background-size 背景图像大小
• background-origin 背景图像的位置区域
• text-shadow 文本阴影
• text-overflow 文本溢出
• word-wrap 单词拆分换行
• transform 2D转换
  
  • translate(px，px) 位移 （可以为%，参考自身宽高）
  • rotate(deg) 顺时针旋转
  • scale(n， m) 宽变为原来的N倍，高变为原来的M倍
  • skew(X轴，Y轴) X轴和Y轴倾斜的角度
  • matrix() 矩阵，有6个参数
• transform 3D转换
• transition 过渡
• animation 动画
• css3多列
  
  • column-count 列数
  • column-gap 列之间的间隙
  • column-rule 列之间的边框的厚度，样式及颜色
  • column-width 列宽
  • column-fill 列内容对齐方式

transform 3d转换属性

属性	值	描述
transform-origin: x-axis y-axis z-axis;	center length %	设置元素的基点位置：
transform-style	flat preserve-3d	所有子元素在2D平面呈现。 所有子元素在3D空间中呈现。
perspective 规定 3D 元素的透视效果。 该属性只影响 3D 转换元素 与 perspective-origin 属性一同使用该属性	number none	元素距离视图的距离，以像素计。 默认值。与 0 相同。不设置透视。
perspective-origin: x-axis y-axis 规定 3D 元素的底部位置。	center length %	设置一个3D元素的基数位置
backface-visibility 元素不面向屏幕时是否可见	visible hidden	背面是可见的。 背面是不可见的。

transition 过渡

transition: property duration timing-function delay;

属性	值	描述
transition-property 规定应用过渡的 CSS 属性的名称。	none all property	没有属性会获得过渡效果。 所有属性都将获得过渡效果。 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-duration 过渡效果花费的时间。默认是 0。	time	单位（S）或毫秒（ms） 0说明没有过渡效果
transition-timing-function 过渡效果的时间曲线。默认是”ease”。	linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)	匀速 cubic-bezier(0,0,1,1) 慢-快-慢cubic-bezier(0.25,0.1,0.25,1) 慢-快cubic-bezier(0.42,0,1,1) 快-慢cubic-bezier(0,0,0.58,1) 慢cubic-bezier(0.42,0,0.58,1) 值是 0 至 1 之间的数值。
transition-delay 过渡延迟时间。默认是 0。	time	单位（S）或毫秒（ms）。

css3 动画 @keyframes 与 animation

@keyframes name{
    from{ ... }
    to{ ... }
}

@keyframes name{
    0%{ ... }
    100%{ ... }
}

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation:名称/动画时间/播放速度/延迟时间/播放次数/反向播放/动画结束时操作/指定动画运行或暂停

属性	值	描述
animation-name 指定要绑定到选择器的关键帧的名称	keyframename none	指定要绑定到选择器的关键帧的名称 指定有没有动画（可用于覆盖从级联的动画）
animation-duration 动画指定需要多少秒或毫秒完成	time	默认值为 0，意味着没有动画效果
animation-timing-function 设置动画将如何完成一个周期	linear… cubic-bezier(n,n,n,n)
animation-delay 设置动画在启动前的延迟间隔。	time	默认值为0，意味着不用等待
animation-iteration-count 定义动画的播放次数。	value	定义应该播放多少次动画
animation-direction 指定是否应该轮流反向播放动画。	normal reverse alternate alternate-reverse	正常播放 反向播放 正反轮流播放 反正轮流播放
animation-fill-mode 规定当动画不播放时的操作	none forwards backwards both	默认值，执行前后样式不变 样式变为结束时的样式 动画将应用关键帧 动画会在两个方向上扩展动画属性
animation-play-state 指定动画是否正在运行或已暂停。	paused running	指定暂停动画 指定正在运行的动画

css3 多列

属性	值	描述
column-count	value	指定了需要分割的列数
column-gap	px	指定了列与列间的间隙
column-rule	px style color	设置了列之间的边框的厚度，样式及颜色
column-span	value/all	指定元素跨越多少列
column-width	px	指定列的宽度
column-fill	balance/auto	指定如何填充列(长短平衡/列顺序填充)

css3 用户界面

属性	值	描述
box-sizing	content-box默认值 border-box	盒子内容区域content = width content = width+padding+border
resize	none both horizontal vertical	用户无法调整元素的尺寸。 用户可调整元素的高度和宽度。 用户可调整元素的宽度。 用户可调整元素的高度。
outline-offset	px	指定外边框边缘的轮廓(与outline配合使用)(不占空间)

css3 多媒体查询

在屏幕可视窗口尺寸大于 480px小于 680px的时候显示

@media screen and (min-width: 480px) and (max-width:680px){
    body{background-color:red;}
    ...
}

参考文献

菜鸟教程