30个CSS3新功能的实用教程

CSS3 ，许多令人振奋的功能将得到实现。 CSS3具有更大的灵活性，并使它更容易地实现复杂的应用。许多省时省力的规则正在为CSS3而制订 ：文字阴影，盒大小，不透明度，多背景，边框半径，边框图像，多栏布局等…

虽然目前只有最先进的浏览器支持的这些效果，但它仍然很有趣！

在此之后，我们将看看一些有趣的CSS3特性 ，今天您就可以在自己的网站上付诸实践。

CSS3 Color Module

CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA. 。这篇文章详细介绍如何在CSS3中使用这些颜色。

Gradient Borders

允许使用渐变边框 -moz-border-radius / -webkit-border.

Border Image

正常的CSS边框有时候是不够的。如果需要实用CSS图像边框，CSS3通过支过border-image and border-corner-image 来实现。

Rounded Corner Boxes

Andy budd告诉我们如何轻松地创建圆角边框border-radius and background position.

Box Shadow

CSS3的 box-shadow 允许我们添加阴影效果，而不必在特定的元素上实用图像. 目前只有Safari 3+ and Firefox 3.1 (Alpha) 支持box-shadow.

Multiple background Images

如果你想添加多个背景在一个盒子或一个段落， CSS3允许在一个元素上使用多个背景图像。

Multiple Columns

CSS3模块允许建立多栏文本而不需要表格 -moz-column-count and -moz-column-width. 如果你的网页上文字过长，这是一个很实用的CSS属性

Text Shadow

文本限影text-shadow 属性允许添加阴影到文字上的每个字母。另外, text-shadow 不是CSS3新有的属性，最初出现在CSS2,但在CSS2.1后移除。

Box-sizing and Box-model

box-sizing可让您指定的行为，浏览器在计算宽度的一个元素和控制改变盒子大小

CSS3 Opacity

虽然，不透明的CSS属性已经有一段时间，当CSS3推出将有更多使用不透明属性。您可以为盒子，图片和文字使用不透明属性设置。

CSS3 Selectors

CSS3的属性选择器大全

Brilliant implementations of CSS3 Properties

Awesome Buttons with CSS3 and RGBA

也许您不会相信，这些按钮只使用了CSS3的属性，而且没有用到任何图像。

Render User Interface Using CSS3

这是CSS3一个创造性的例子 。有模拟的OSX版的用户界面使用CSS3 。点击图片以查看工作演示。

CSS3 Template Layout with jQuery Plugin

此插件允许网页设计师用jQuery实现W3’s CSS 模板布局

View Demo

Using CSS3 RGBA for Transparency

如果您想知道如何实现透明方块的24种方法，本文讨论RGBA让您指定颜色为半透明和如何使用它。

Custom Font with CSS3

虽然有其它方式 嵌入字体，但使用CSS3自定义的字体将容易得多。

Creating a Polaroid Photo Viewer with CSS3 and jQuery

网页设计师Marco Kuiper如何使用CSS3和jQuery创建华丽的画廊。

View Demo

Example and Use of Box Sizing

讨论如何使用CSS3的 box sizing。

CSS3 Corporate Fun

这个菜单模仿推悬停按钮使用的CSS选择符。

CSS3 Links Creation and Usage

CSS3的伪类

Tooltip with CSS3

使用:before (or :after) pseudo element和:hover pseudo class.创建一个提示

View Demo

Styling Forms with Attribute Selectors

如何使用Web表单样式属性选择符

CSS Opacity

多种使用CSS透明度的方法。

Using CSS3 Selectors to Apply Link Icon

使用CSS3选择器添加一个图标在链接旁边。

Simple CSS3 rounded Corners with Support for IE

CSS3圆角边框，兼容IE浏览器（IE下使用图片）

View Demo

The Shadow Effect in CSS3

CSS3 属性-webkit-box-shadow在任何特殊DIV上创建阴影. 此DEMO只支持Safari.

View Demo

Must Read CSS3 Related Articles :

Six Questions: Eric Meyer on CSS3

5 Techniques to Acquaint You With CSS3

Push Your Web Design Into The Future With CSS3

原文地址：http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html