下一代CSS,在CSS2.1基础上增加了一些东西。刚刚在nettuts上看到了CSS的5个新特效,让人感觉很不错。这是5个非常实用的特效,包括圆角矩形,半圆角矩形,半透明,阴影和大小可变。

这5个特效仅仅是使用了几条语句而已,简单而实用。当然,想要正确显示你还需要一个支持CSS3的浏览器。是的,你需要的是一个非常新的浏览器,这里所说的新绝对不是IE7,或是使用其内核的其他什么浏览器。图中所示的浏览器我想应该是safari3吧,我没有尝试,如果你想试试的话可以进入这个页面体验下。

OK,顺便说下这五个特效的代码,说不定以后要用呢。其实都很简单,不过是以前滤镜中的特效,现在被整合进去了而已。

圆角矩形:
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

如果是一个四角的圆角矩形的话,位置部分可以省略。这里提一下,moz和webkit的区别在于前者用于前者用于火狐浏览器,而后者用于safari或者Chrome。

半透明更简单了,直接opacity: 0.3;搞定。

同样还有阴影:-webkit-box-shadow: 3px 5px 10px #ccc;
注意,这里有四个变量。3px表示阴影和元件的水平距离,5px表示阴影和div的垂直距离,10px表示阴影的宽度(相信使用过PS的人会很熟悉什么叫阴影的宽度),#ccc就是阴影的颜色了,也不难对吧。

最后是可变大小:
resize: both;
overflow: auto;

这里的overflow必不可少,有它才能正常工作。同时我们还可以加上一些限定,”max-width”, “max-height”, “min-width” 和”min-height”。但遗憾的是这个效果目前只在safari上正常显示。

 想说点什么吗?

 (拖动评论框右下角可扩展评论框面积;若评论发表后未显示请耐心等待审核)

左半红印发表于2009.01.4th