CSS3新功能简要

1.CSS3 框架:
   由 CSS3,您可以创建圆角。加入到该矩形阴影,使用图片绘制边框。例如
* border-radius
-border-*-radius(top,left,right,bottom)
* box-shadow
* border-image
-round
-stretch
2.CSS3 背景:
   CSS3 包括多个新的背景属性,它们提供了对背景更强大的控制。
* background-size [width] [height]
* background-origin
-content-box
-padding-box
-border-box
* background-clip
3.CSS3 文本效果:
   CSS3 包括多个新的文本特性。
* text-shadow
* word-wrap
4.CSS3 @font-face规则:
可将设计师希望使用的字体文件存放到webserver上。它会在须要时被自己主动下载到用户的计算机上。就可以使用随意字体。在新的@font-face规则中。您必须首先定义字体的名称(比方myFirstFont),然后指向该字体文件。


5.CSS3 转换:
   通过 CSS3转换,我们可以对元素进行移动、缩放、转动、拉长或拉伸。

转换是使元素改变形状、尺寸和位置的一种效果。您可以使用2D或3D转换来转换您的元素。
   2D 转换方法:

* translate()
* rotate()
* scale()
* skew()
* matrix()
   Chrome 和 Safari 须要前缀 -webkit-,Internet Explorer 9 须要前缀 -ms-
6.3D 转换:
   CSS3 同意您使用 3D 转换来对元素进行格式化。 3D 转换方法:rotateX();rotateY()
   Opera 仍然不支持 3D 转换。


7.CSS3 过渡:
   通过 CSS3。我们能够在不使用Flash动画或JavaScript的情况下。当元素从一种样式变换为还有一种样式时为元素加入效果。
   CSS3 过渡是元素从一种样式逐渐改变为还有一种的效果。
   要实现这一点,必须规定两项内容:
   规定您希望把效果加入到哪个 CSS 属性上。
   规定效果的时长:默认值是 0;
8.CSS3 动画:
   通过 CSS3,我们可以创建动画。这可以在很多网页中代替动绘图片、Flash 动画以及 JavaScript。


   @keyframes规则用于创建动画。在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。


   请把它捆绑到某个选择器,否则不会产生动画效果。


通过规定至少下面两项 CSS3 动画属性。就可以将动画绑定到选择器:
   规定动画的名称;
   规定动画的时长;
9.CSS3 多列:
   通过 CSS3。您可以创建多个列来对文本进行布局 - 就像报纸那样!

* column-count
* column-gap
* column-rule
10.CSS3 用户界面:
   在 CSS3 中。新的用户界面特性包含重设元素尺寸、盒尺寸以及轮廓等。
* resize
* box-sizing
* outline-offset

版权声明:本文博客原创文章,博客,未经同意,不得转载。

你可能感兴趣的:(css3)