虽然CSS3还没有普及,但其具有的新特新却是每个设计师梦寐以求的,下面我们就来看看5个非常实用的CSS3特性:
1.圆角矩形
目前我们想制作圆角矩形只能通过图片的方式来实现,但在CSS3中只需要一二句代码就OK了:
.round{ -moz-border-radius:10px; -webkit-border-radius:10px; }
border-radius:10px;就是圆角的半径为10px,数值越大,弧度越大.
从代码就很明显的看出IE不支持这个…-moz 对应火狐,-webkit 对应safari和chrome.
2.单圆角的定义
有了上面的经验,做这个也很容易,看代码:
.indie{ -moz-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-right-radius:10px;}
使用 topleft 来定义上左角,同理还有topright,bottomright,bottomleft.值得注意的是火狐和webkit内核的浏览器定义是不一样的.
3.透明度
这个相信不少人都用过,IE可以通过滤镜来达到相同的效果.
.opacity{ opacity:0.4; }
==========下面的特性只有webkit内核的浏览器才支持==========
4.CSS投影
CSS投影,很酷的特性,只有webkit支持
.shadow{ -webkit-box-shadow: 3px 5px 10px #ccc; }
3px表示水平方向的投影，5px表示纵向投影，而10px而指模糊的跨度.
5.尺寸调节
同样是webkit内核的浏览器才支持的特性,其实在用chrome的时候就发现textarea可以重定义尺寸,现在才知道是CSS3的特性.
.resize{ resize:both; overflow:auto; }
resize:both; 表示水平,垂直都可以调节尺寸,你还可以指定它:resize:horizontal;水平方向调节 resize:vertical;纵向调节,当然还可以用max-width,min-height等来限制其尺寸.
运行代码:(请在FF3 safari chrome中运行)
提示：你可以先修改部分代码再运行。
