css3新特性总结

1、什么是css3

　　css用于控制网页的样式和布局，css3是css的升级版本，受浏览器限制，跨浏览器开发有点复杂。css3彻底向后兼容

2、css3新特性

　　一、边框

　　css3的边框有以下属性：

　　　　（1）、border-radius：圆角边框，示例以下：

　　　　

　　　　效果以下所示：

　　　　（2）、box-shadow：边框阴影，示例以下：

　　　　

　　　　效果以下所示：

　　　　

　　　　（3）、border-image：边框图片，示例以下：

　　　　

　　　　效果以下所示：

　　　　　

　　二、背景

　　　　（1）、background-size

　　　　　　css3中规定背景图片的尺寸，能够设置重复的背景图片。以前是由图片的实际尺寸决定的。

　　　　（2）、background-origin

　　　　　　规定背景图片的定位区域，此属性能够将多个图片整合成一个图片。有利于减小HTTP请求。

　　三、文本效果

　　　　（1）、text-shadow，文本阴影，示例以下：

　　　　　　

　　　　效果以下：　　

　　　　　　

　　　　（2）、word-wrap，文本换行，示例以下：

　　　　　　

　　　　效果以下：

　　　　　　

　　四、字体

　　　　css3中使用@font-face规则定义字体，指向字体的文件，在HTML中使用font-family属性引用字体的名称。

　　五、2D转换

　　　　（1）、translate（）移动，示例以下：

　　　　　

　　　　（2）、rotate（）旋转，示例以下：

　　　　　　

　　　　（3）、scale（）元素的缩放，示例以下：

　　　　　　

　　　　（4）、skew（）元素根据x轴或者y轴进行翻转，示例以下：

　　　　　　

　　　　（5）、matrix（）定义2D转换，使用六个值的矩阵。

　　六、3D转换

　　　　

　　七、过渡

　　　　transition简写属性，用于在一个属性中设置四个过渡属性。示例以下：

　　　　

　　八、动画

　　　　css3中可以建立动画，能够在许多网页中取代动画图片，flash动画以及JavaScript。

　　　　建立动画须要学习@keyframes规则，form表示开始。to表示结束，也可使用百分比设置。示例以下：

　　　　

　　九、多列

　　　　（1）、column-count规定元素被分割的列数，示例以下：

　　　　　　

　　　　效果以下：

　　

　　　　（2）、column-gap规定列之间的间隔，示例以下：

　　　　

　　　　（3）、column-rule设置列之间的宽度、样式和颜色规则。示例以下：

　　　　

　　十、用户界面

　　　　（1）、resize规定是否可由用户调整元素尺寸。

　　　　

 

　　　　（2）、box-sizing容许你以确切的方式定义适应某个区域的具体内容。

　　　　

 

　　　　（3）、outline-offset对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

　　　　

　　　　

3、总结

　　这次经历面试后才发现本身css3方面学过的都忘记了，值此空闲时间作一些笔记加深记忆。