CSS3 仍然在开发中,如果你想跟进开发进度,请点击这里。 是的,正如你所看到的,它开发了这么多年依然没有完成。我并没有错过2006年它的第一次发布的介绍。
还好,由Opera和Safari领头,更多的浏览器生产商已经开始支持CSS3的众多特性了。Firefox 3.1即将发布,它承诺跟进。然而,IE依然跟在后面。
到现在为止,只有一些已经工作的特性,他们中的一些如下:
圆角
从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网站。主要问题是,你至少需要4个图片(每个角一个)和一些JS或复杂的层来实现圆角。
这些将成为过去了!两行就足够了。让我给你个例子:
HTML:
This is easy
css 代码:
.round {
background-color: #666;
color: #fff;
line-height: 20px;
width: 200px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
这里是上面的截屏:
圆角
那么,有什么新东西?实际上CSS3的声明是border-radius。 到目前为止,这个特性尚未确定,众多浏览器生产商通过前缀支持该属性。Firefox使用 -moz- , Safari使用 -webkit-
这里同样支持你选择哪个角使用圆角,这可以通过使用“TopLeft TopRight BottomRight BottomLeft”实现。示例:
# -moz-border-radius-topleft / -webkit-border-top-left-radius
# -moz-border-radius-topright / -webkit-border-top-right-radius
如果可能你想要使用圆角功能,但是想要其它浏览器表现同样的效果,看这里。
边框
另外一个令人兴奋的CSS3新的border特性是支持border-image。这样你就能为每一个独立的角和边框定义一个图片。
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
使用的图片可以是这样的:
边框
border的另一个非常帮的特性是使用gradientcolors,而不是用图片:
边框颜色
CSS 代码:
.bordercolor{
border: 8px solid #000;
-moz-border-bottom-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
-moz-border-top-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
-moz-border-left-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
-moz-border-right-colors: #0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
width:200px;
}
目前只有Firefox3支持这个特性,所以在Safari和Opera无法使用。
多栏
该特性使生活更加容易,呵呵。这个新特性允许网页设计师将文字填入栏中。这可以通过两种方法实现,定义各栏的宽度,或者是定义栏数。
多栏布局目前只支持Mozilla核心的浏览器和Safari 3, 它们支持各自的属性前缀 -moz-和-webkit-。下面的例子使用栏宽:
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
下一个例子使用栏数:
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
这两个例子输出如下:
多栏
还有一个特性尚未生效,它就是“column-space-distribution”,这个属性可以描述当页面中还有剩余空间时如何分配栏目之间的间距。
还有很多,很多其他新特性可用,你可以通过访问W3C网站了解所有信息。
分享到:
相关推荐
CSS3教程和css3新特性专题
资源名称:深入了解 CSS3 新特性资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
本资源是基于html5 rocks作的CSS3介绍,是PPT风格的网页,本人做介绍用的,自己写了一些代码进去,大家可以参考。 HTML5 Rocks官网上有更丰富的关于HTML5+CSS3+JS的介绍,由于资源比较大,大家可以自己到官网下载。
CSS3新特性和CSS3教程 通俗易懂 简单易学
CSS3新特性,带你一小时学完CSS3
1.07 css3新特性
CSS3新特性1
CSS3新特性.md
html5和css3新特性.pdf
HTML5CSS3新特性的浏览器支持情况.pdf
这是一个对IE8及以下做前端兼容的文件工具...--对于ie6到ie8做兼容,兼容h5,css3等新特性--> <!--[if (gte IE 6)&(lte IE 8)]> [removed][removed] [removed][removed] [removed][removed] <![endif]-->
喜欢玩css的看看吧。适合css高级选手。
一个能让IE9一下的浏览器完美支持CSS样式新特性的插件,比如支持圆角,文字、元素阴影效果。
HTML5 Rocks是由谷歌牵头的开源的web项目。有丰富的html5的demo。 基于html5 rocks作的CSS3介绍,是PPT风格的网页,大家可以参考。 HTML5 Rocks官网上有更丰富的关于HTML5+CSS3+JS的介绍,大家可以自己到官网下载。
本文介绍了Css3新特性应用之视觉效果,具体有单侧阴影、不规则投影、染色体效果、毛玻璃效果、折角效果,具体实现如下: 一、单侧阴影 1、box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset...
内容极为全面、丰富和翔实,由浅入深地讲解了CSS3新特性的语法、功能和使用技巧,涵盖选择器、边框、背景、文本、颜色、UI、动画、新型盒模型、媒体查询、响应式设计等各种模块;写作方式创新,有趣且易懂,用图解的...
第1部分将介绍CSS的发展历史,个版本的功能特点差异和CSS3引入的新特性,并给出一些应用实例 第2部分,我们针对这些 CSS3 新特性介绍其在不同浏览器中实现的差别,并结合实例讲解如何利用这些特性进行开发。 第三...