CSS3中许些实用的属性

1.transition
CSS过渡，可以将一个属性值在一定时间内过渡
用法：transition:all 0.3s ease;
参数：需要过渡的属性，过渡时间，过渡方式
实例：

a.foo {
			padding: 5px 10px;
			background:#9c3;
			/*支持不同的浏览器*/
			-webkit-transition:background 1s ease, color .8s linear;
			-moz-transition:background 1s ease, color .8s linear;
			-o-transition:background 1s ease, color .8s linear;
			transition: background 1s ease, color .8s linear;
		}
		a.foo:hover,a.fooL:focus {
			color: #030;
			background: #690 ;
		}

效果：

2.rgba
rgb颜色与alpha透明度
用法：rgba(255, 255, 255, 0.5)

3.shadow
添加阴影
用法：text-shadow: 0 5px 6px #fff;(对文字)
box-shadow: 0 5px 6px #fff;(对边框)
参数：水平阴影，垂直阴影，阴影尺寸，阴影颜色。（还有其他参数可去http://www.w3school.com.cn/cssref/pr_box-shadow.asp浏览）
实例：

h1 {
			text-shadow: 0 5px 6px rgba(120, 64, 123, 0.5);
		}
		div {
			width: 100px;
			height: 30px;
			box-shadow: 5px 5px 6px rgba(120, 78, 56, 0.4);
		}

效果：

4.border-radius
圆角效果
用法：border-radius：14px;
参数：圆角值也可用百分比
实例：

div {
			border: 1px solid;
			border-radius:25px;
		}

效果：

我们现在就用这些属性做一个比较简单的导航栏试试吧
css:

#nav {
			float: right;
			padding-top: 22px;
			padding-right: 20px;
		}
		#nav li {
			float: left;
			margin-left: 30px;
			list-style-type: none;
		}
		#nav li a {
			padding: 5px 15px;
			font-weight: bold;
			color: #ccc;
			text-decoration: none;
			color: rgba(255, 255, 255, 0.7);
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
			/*支持不同的浏览器*/
			-webkit-border-radius:14px;
			-moz-border-radius:14px;
			-o-border-radius:14px;
			border-radius: 14px;
			-webkit-transition:all .3s ease-in-out;
			-moz-transition:all .3s ease-in-out;
			-o-transition:all .3s ease-in-out;
			transition:all .3s ease-in-out;
		}
		#nav li a:hover,#nav li a:focus {
			color: #fff;
			background: rgba(255, 35, 120, 0.15);
		}

html:

<ul id="nav">
		<li><a href="#">home</a></li>
		<li><a href="#">news</a></li>
		<li><a href="#">stuff</a></li>
		<li><a href="#">about</a></li>
	</ul>

效果：