CSS3 新属性汇总

css动画

1.1. 过渡动画 transtion：
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

1.2. transition 简写属性，用于在一个属性中设置四个过渡属性。分写属性：

• transition-property：规定应用过渡的 CSS 属性的名称,添加多个属性，逗号隔开必填

• transition-duration: 定义过渡效果花费的时间。默认是 0s 需要指定

• transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”。取值如下：
  ease ease-in ease-in-out ease-out

• transition-delay：规定过渡效果何时开始。默认是 0s

1.3. 关键帧动画

• 定义动画如：

@keyframes name{
	0%{
		background: red;
	}
	50%{
		background: pink;
	}
	100%{
		background: orange;
	}
}

调用动画：
animation: name duration timing-function delay iteration-count direction fill-mode
所有动画属性的简写属性，除了 animation-play-state 属性。

分写属性：

• animation-name 规定 @keyframes 动画的名称。

• animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

• animation-timing-function 规定动画的速度曲线。默认是 “ease”。

• animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样
  式。

• animation-delay 规定动画何时开始。默认是 0。

• animation-iteration-count 规定动画被播放的次数。默认是 1。

• infinite 无限循环

• animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 reverse 反向

• animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。

背景background

合写属性：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit
分写属性：

• background-color 指定要使用的背景颜色
• background-position 指定背景图像的位置
• background-size 指定背景图片的大小
• background-image 指定要使用的一个或多个背景图像
• background-repeat 指定如何重复背景图像
• background-origin 指定背景图像的定位区域
• background-clip 指定背景图像的绘画区域
• background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
• scroll 背景图片随页面的其余部分滚动。这是默认fixed 背景图像是固定的

box-sizing 盒模型

• box-sizing : border-box (IE盒模型)
• box-sizing: content-box (标准盒模型)

计算元素在页面中占的空间：

• w3c标准盒模型： content + padding + border+ margin = 实际占的空间
  默认情况下; content = css中定义的 width
• IE盒模型： [content + padding + border] + margin = 实际占的空间
  content + padding + border = css中定义的width

应用：

• IE盒模型，指定元素的宽，页面空间的宽需准确计算

CSS3 渐变（gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡；

• linear-gradient 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

语法：

• background: linear-gradient(direction, color-stop1, color-stop2, …);
• radial-gradient 径向渐变（Radial Gradients）- 由它们的中心定义
• background: radial-gradient([center, shape size,] start-color, …, last-color);
• shape值可以是 circle 或 ellipse

注意：
1、会使用线性渐变，径向渐变（有兼容问题）
2、会取消过渡
3、会配合background-size ,background-repeat 使用

文本效果相关的css属性

• text-overflow 规定当文本溢出包含元素时发生的事情。
• text-shadow 向文本添加阴影。
• white-space 指定元素内的空白怎样处理。 nowrap/normal
• word-break 规定非中日韩文本的换行规则。 normal 浏览器默认的换行规则。 break-all 允许在单词内换行。keep-all 只能
  在半角空格或连字符处换行。
• word-wrap : 允许对长的不可分割的单词进行分割并换行到下一行。; break-word / normal

2d 转换

transform 属性的取值：

• translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
• translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
• translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
• scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
• scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
• scaleY(n) 定义 2D 缩放转换，改变元素的高度。
• rotate(angle) 定义 2D 旋转，在参数中规定角度。
• skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
• skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
• skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

媒体类型

@media 媒体类型允许你指定文件将如何在不同媒体呈现。

语法:
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media [not|only] mediatype [ and (expressions)] {
CSS 代码...;
}

你也可以在不同的媒体上使用不同的样式文件：注意： 空格；

3d转换：

• transform: translate([,]?) rotate() - scale([,]?) skew
• translate3d(x,y,z) 定义 3D 转化。
• translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
• translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
• translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
• scale3d(x,y,z) 定义 3D 缩放转换。
• scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
• scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
• scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
• rotate3d(x,y,z,angle) 定义 3D 旋转。 [x,y,z] 类型，可以是0到1之间的数值
• rotateX(angle) 定义沿 X 轴的 3D 旋转。
• rotateY(angle) 定义沿 Y 轴的 3D 旋转。
• rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
• transform-origin 允许你改变被转换元素的位置。
• transform-style 规定被嵌套元素如何在 3D 空间中显示。
• perspective 规定 3D 元素的透视效果。