网站地图    收藏   

主页 > 前端 > css教程 >

CSS3新特性简介 - html/css语言栏目:html.css - 自学

来源:自学PHP网    时间:2015-04-14 14:51 作者: 阅读:

[导读] 1 CSS3 边框:通过 CSS3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框,如border-radius;box-shadow;border-image2 CSS3 背景:CSS3 包含多个新的背景属性,它们提供了对背景更强大的...

1.CSS3 边框:通过 CSS3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框,如border-radius;box-shadow;border-image


2.CSS3 背景:CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。background-size;background-origin


3.CSS3 文本效果:CSS3 包含多个新的文本特性。text-shadow;word-wrap


4.CSS3 @font-face规则:可将设计师希望使用的字体文件存放到web服务器上,它会在需要时被自动下载到用户的计算机上,即可使用任意字体。在新的@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

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论