整理几款css3的简单实例

1.斜切）

HTML：

你好。这是一个 DIV 元素。

你好。这是一个 DIV 元素。

 css:

显示效果：

2.css3圆角）

源代码：

border-radius 属性允许您为元素添加圆角边框！ 

显示效果：

3.CSS3盒阴影)

源代码：

显示效果：

4.css3渐变）

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

源代码：

线性渐变 - 从上到下
从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：



注意： Internet Explorer 9 及之前的版本不支持渐变。


			

显示效果：

使用透明度（Transparency）

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

源代码：

线性渐变 - 透明度
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。



注意： Internet Explorer 9 及之前的版本不支持渐变。


			

显示效果：

5.css3过渡）

实例：

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。

注释：本例在 Internet Explorer 中无效。