CSS3应用效果实例

CSS3已经不再遥远，不久的将来大家将在CSS3构建我们的网站，本文是从网上搜摘的一些关于CSS3的应用效果实例：

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

1. -moz-border-radius: 20px;  
2. -webkit-border-radius: 20px;  
3. border-radius: 20px;  

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

1. -moz-border-radius-topleft: 20px;  
2. -moz-border-radius-topright: 20px;  
3. -moz-border-radius-bottomleft: 10px;  
4. -moz-border-radius-bottomright: 10px;  
5. -webkit-border-top-rightright-radius: 20px;  
6. -webkit-border-top-left-radius: 20px;  
7. -webkit-border-bottom-left-radius: 10px;  
8. -webkit-border-bottom-rightright-radius: 10px; 

 2. 图形化边界

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

1. border: 5px solid #cccccc;  
2. -webkit-border-image: url(/images/border-image.png) 5 repeat;  
3. -moz-border-image: url(/images/border-image.png) 5 repeat;  
4. border-image: url(/images/border-image.png) 5 repeat; 

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

1. border-bottom-rightright-image  
2. border-bottom-image  
3. border-bottom-left-image  
4. border-left-image  
5.    border-top-left-image  
6.    border-top-image  
7.    border-top-rightright-image  
8.    border-right-image  

3. 块阴影与文字阴影

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

1. -webkit-box-shadow: 10px 10px 25px #ccc;  
2. -moz-box-shadow: 10px 10px 25px #ccc;  
3. box-shadow: 10px 10px 25px #ccc; 

前两个属性设置阴影的 X / Y 位移，这里分别是 10px，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。文字阴影也可以这样设置：

1. text-shadow: 2px 2px 5px #ccc; 

4. 使用 RGBA 实现透明效果

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

1. rgba(200, 54, 54, 0.5);  
2. background: rgba(200, 54, 54, 0.5);  
3. color: rgba(200, 54, 54, 0.5); 

5. 使用 @Font-Face 实现定制字体

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

语法如下:

1. @font-face {  
2. font-family:'Anivers';  
3. src: url('/images/Anivers.otf') format('opentype');  

 怎么样？CSS3在页面内容的展现上的进步无疑是巨大的，让我们拭目以待CSS3的王朝的到来！