几日不见如隔三秋，因为一直在忙着找工作，GReader都无暇顾及，打开一看真是“眼花缭乱”啊，呵呵，落伍了，要补课！

CCS3.0带来的这几个新特性，虽然有点儿像“绣花枕头”，但是用在个人站点还是很不错的，很自然的IE对其支持仍一如既往的欠佳：

1. 圆角效果  所支持的浏览器：Firefox, Safari , Chrome

CSS3 新功能中最常用的一项是圆角效果，标准 HTML 方块对象是90度方角的，CSS3 可以帮你实现圆角。

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

甚至单个角也可以实现圆角，不过 Mozilla 和 Webkit 的语法稍有不同。

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-rightright-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-rightright-radius: 10px;

详细请参阅:
W3C Working Draft
Border-radius on CSS3.info
The Art of Web

2. 图形化边界 支持的浏览器： Firefox 3.1, Safari , Chrome.

顾名思义，图形化边界就是允许使用图片作为对象的边界，语法如下:
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

这里，border: 5px 设定了边界的宽度，然后，每个边界的图片定义告诉浏览器，使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置：

border-bottom-rightright-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-rightright-image
border-right-image

详细请参考:
W3C Working Draft
Border-image on CSS3.info
Border-image in Firefox

3. 块阴影与文字阴影 支持的浏览器：Firefox 3.1, Safari, Chrome (只支持 Box 阴影) ，Opera (只支持文字阴影).前3个数字表示红绿蓝三色的值，最后一个值代表透明度，另外，我们还可以使用 opacity 实现透明度（目前的灯箱效果多使用该技巧 – 译者）

阴影效果曾让 Web 设计师既爱又恨，现在，有了 CSS3，你不再需要 Photoshop，已经有网站在使用这个功能了，如 24 Ways website.

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
前两个属性设置阴影的 X / Y 位移，这里分别是 10px，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。文字阴影也可以这样设置：text-shadow: 2px 2px 5px #ccc;

详细请参考:
W3C Working Draft
Box-shadow on CSS3.info
W3C Working Draft
Text-shadow on CSS3.info

4. 使用 RGBA 实现透明效果 支持的浏览器： Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).

目前，Web 设计中的透明效果主要靠 PNG 图片实现（但在 IE 浏览器支持得并不好 – 译者），在 CSS3，可以直接实现透明效果。

rgba(200, 54, 54, 0.5);
background: rgba(200, 54, 54, 0.5);
color: rgba(200, 54, 54, 0.5);
color: #000;
opacity: 0.5;

详细请参考:
W3C Working Draft
RGBA on CSS3.info
Pure CSS Opacity

5. 使用 @Font-Face 实现定制字体 支持的浏览器： Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折，如果你不怕麻烦，可以在IE实现这个功能，请参考： make font-face work in IE )

Web 设计中有几种字体是比较安全的，如 Arial,Helvetica, Verdana, Georgia, Comic Sans （中文的，一般来说宋体是唯一安全的 – 译者），现在，使用 CSS3 的 @font-face 可以自己指定字体，不过因为牵扯到版权问题，实际能用的字体也是有限的 (另外，体积庞大的中文字体也是一个不好解决的问题 – 译者)。

语法如下:
@font-face {
font-family:’Anivers’;
src: url(‘/images/Anivers.otf’) format(‘opentype’);
}

详细请参阅：
Fonts available for font-face embedding
Font-face in IE, making Web fonts work
Web fonts, the next big thing – A List Apart

来源：CNBETA