css3简单回顾

边框属性：

• border-radius：创建圆角边框
• box-shadow：添加阴影
• border-image：使用图片来绘制边框

背景属性：

• background-size：规定背景图片的尺寸
• background-origin：规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域
• background-clip：规定背景的绘制区域

新的文本属性：

• text-shadow：向文本添加阴影
• word-wrap：允许对长的不可分割的单词进行分割并换行到下一行，p {word-wrap:break-word;}
• text-outline：规定文本的轮廓
• text-overflow 规定当文本溢出包含元素时发生的事情
• text-wrap 规定文本的换行规则
• text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
• text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法
• punctuation-trim 规定是否对标点字符进行修剪

字体：

在@font-face中定义字体，通过font-family属性来引用字体的名称

• font-family 必需，规定字体的名称
• src 必需 ，定义字体文件的 URL
• font-stretch 可选，定义如何拉伸字体，默认是normal
• font-style 可选，定义字体的样式，默认是 “normal”
• font-weight 可选 ，定义字体的粗细，默认是 “normal”
• unicode-range 可选，定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

<style> 
@font-face
{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf'),
     	url('Sansation_Light.eot'); /* IE9+ */
     	font-weight:bold;
}

div
{
	font-family:myFirstFont;
}
</style>

2D Transform 方法：

• matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
• 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 轴。

3D Transform 方法：

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。

• 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 旋转。

• rotateX(angle) 定义沿 X 轴的 3D 旋转。

• rotateY(angle) 定义沿 Y 轴的 3D 旋转。

• rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

• perspective(n) 定义 3D 转换元素的透视视图。

过渡属性

• transition 简写属性，用于在一个属性中设置四个过渡属性
• transition-property 规定应用过渡的 CSS 属性的名称。
• transition-duration 定义过渡效果花费的时间。默认是 0。
• transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
• transition-delay 规定过渡效果何时开始。默认是 0。

简写：transition: width 1s linear 2s

CSS3 动画属性

• @keyframes 规定动画。
• animation 所有动画属性的简写属性，除了 animation-play-state 属性。
• animation-name 规定 @keyframes 动画的名称。
• animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
• animation-timing-function 规定动画的速度曲线。默认是 “ease”。
• animation-delay 规定动画何时开始。默认是 0。
• animation-iteration-count 规定动画被播放的次数。默认是 1。
• animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
• animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
• animation-fill-mode 规定对象动画时间之外的状态。

简写：animation: myfirst 5s linear 2s infinite alternate;

CSS3多列

• column-count 属性规定元素应该被分隔的列数
• column-gap 属性规定列之间的间隔
• column-rule 属性设置列之间的宽度、样式和颜色规则
• column-width 规定列的宽度
• columns 规定设置 column-width 和 column-count 的简写属性
• column-fill 规定如何填充列

CSS3 用户界面

• resize 属性规定是否可由用户调整元素尺寸

• box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容

• outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

轮廓与边框有两点不同：轮廓不占用空间、轮廓可能是非矩形

div{
	border:2px solid black;
	outline:2px solid red;
	outline-offset:15px;
}

更多内容查看CSS3参考手册：https://www.w3school.com.cn/cssref/index.asp
CSS基础教程：https://www.w3school.com.cn/css/index.asp