初学CSS3应该掌握哪些基础知识-2

css3中新增字体

在网页编辑使用字体时，在CSS3出现之前设计师只能使用计算机已安装的字体，而现在CSS3中，当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

那么如何使用CSS3字体呢，我们可以看一下这篇文章。 
CSS3 字体和CSS3 新增控制字体属性

边框

边框圆角

圆角处理时，脑中要形成圆、圆心、长半径、短半径的概念，正圆是椭圆的一种特殊情况。

可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，参考手册练习熟悉各种简写方式。

表格运用圆角需要要 border-collapse: separate; 
当圆角半径小于或等于边框宽度时，元素内角是直角

边框阴影

设置边框阴影不会影响盒子的布局，即不会影响其兄弟元素的布局

spread可以与blur、h-shadow、v-shadow相互抵消，blur不可为负值

可以设置多重边框阴影，实现更好的效果，增强立体感。

背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

cover 会使“最大”边，进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。

contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。

background-size会以background-clip设定的盒模型计算

背景图片尺寸在实际开发中应用十分广泛。

渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

可分为线性渐变、径向渐变、重复渐变。

线性渐变指沿着某条直线朝一个方向产生渐变效果。

径向渐变指从一个中心点开始沿着四周产生渐变效果

关于圆的知识同边框圆角章节的介绍

转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

2D 转换

详细请点击css3 2D转换transform

translate(x,y) x、y 可为负值，相对自身移动，并未脱离文档流。

左手坐标系：伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。

3D转换

详细请点击css3 3D转换 transform 
左手法则：左手握住旋转轴，竖起拇指指向旋转轴正方向，正向旋转方向就是其余手指卷曲的方向。

3D坐标轴，用X、Y、Z分别表示空间的3个维度，三条轴上互相垂直。

兼容性

通过caniuse.com可询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。