CSS3常用知识

1. 圆角效果

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-right-radius: 20px;

-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

2. 图形化边界
顾名思义，图形化边界就是允许使用图片作为对象的边界，语法如下:

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-right-image

border-bottom-image

border-bottom-left-image

border-left-image

border-top-left-image

border-top-image

border-top-right-image

border-right-image

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

-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;

4. 使用 RGBA 实现透明效果
目前 ，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;

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

@font-face {

    font-family:'Anivers';

    src: url('/images/Anivers.otf') format('opentype');

}