5个CSS3实用特性

Bell — Mon, 05 Jan 2009 06:58:06 +0000

虽然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中运行)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS3-iinterest</title> <style type="text/css"> div{ float:left; width:150px; height:150px; margin:10px; background:#eef8fe; border:1px solid #8cc5e3;} .round{ -moz-border-radius:10px; -webkit-border-radius:10px; } .indie{ -moz-border-radius-topleft:10px; -moz-border-radius-bottomright:10px; -webkit-border-top-left-radius:10px; -webkit-border-bottom-right-radius:10px;} .opacity{ opacity:0.4; } .shadow{ -webkit-box-shadow: 3px 5px 10px #ccc; }/*3px表示水平方向的投影，5px表示纵向投影，而10px而指模糊的跨度*/ .resize{ resize:both; overflow:auto; }/*resize:horizontal;水平方向调节 resize:vertical;纵向调节 */ </style> </head> <body> <div class="round"></div> <div class="indie"></div> <div class="opacity"></div> <div class="shadow"></div> <div class="resize"></div> </body> </html>

提示：你可以先修改部分代码再运行。

IInterest » 圆角

5个CSS3实用特性