css3圆角

/* 圆角 */
.radius{
	border:1px solid #dedede;
    -webkit-border-radius:3px 6px 9px 12px;
    -moz-border-radius:3px 6px 9px 12px;
    border-radius:3px 6px 9px 12px;
	/* 数字顺序依次是：上左 上右 下右 下左 */
}

css3文字内阴影

/* 文本阴影 */
.textshadow{
	text-shadow:0px 2px 0px #fff;
	/* 数字顺序依次是：右边偏移 下边偏移 阴影模糊大小 */
}

css3投影与内阴影

/* 阴影 */
.shadow{
	-webkit-box-shadow:2px 3px 3px #eeeeee, inset 1px 1px 3px #dddddd;
    -moz-box-shadow:2px 3px 3px #eeeeee, inset 1px 1px 3px #dddddd;
    box-shadow:2px 3px 3px #eeeeee, inset 1px 1px 3px #dddddd;
	/* 投影数字顺序依次是：右边 下边 投影模糊大小 */
	/* 内阴影数字顺序依次是：左边 上边 阴影模糊大小 */
}	

css3线性渐变 标准写法

/* 线性渐变 */
.gradient{
	background:#ffffff;
	background:linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
	background:-moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* firefox */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Safari or Chrome */
	background:-webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Safari or Chrome */
	background:-o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera */
	background:-ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE9 */
}

css3角度转换

/* 角度转换 */
.transform{
	-webkit-transform:rotate(178deg);
	-moz-transform:rotate(178deg);
	-o-transform:rotate(178deg);
	transform:rotate(178deg);
}

CSS3 transition下简单的背景色平滑变换 查看更多

经过我~~

/* 过渡效果 */
.trans{
    display:block;width:160px;height:30px;line-height:30px;text-align:center;padding:10px;color:#fff;
    background:#33589f;/* 必须填写过渡条件 *//
	-webkit-transition:background 0.2s linear 0s;
	-moz-transition:background 0.2s linear 0s;
	-o-transition:background 0.2s linear 0s;
	transition:background 0.2s linear 0s;
}
.trans:hover{
	/* 只有当鼠标移入时才处理注：若a:hover中不写transition,则会继承a中的transition */
	background:#263c7b;/* 必须填写过渡条件 */
	color:#f60;/* 必须填写过渡条件 */
	text-shadow:2px 2px 10px #f00;/* 必须填写过渡条件 */
    -webkit-transition:background 0.5s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;/* 它可以设置很多过渡效果 */
	-moz-transition:background 0.5s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;/* 它可以设置很多过渡效果 */
	-o-transition:background 0.5s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;/* 它可以设置很多过渡效果 */
	transition:background 0.5s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;/* 它可以设置很多过渡效果 */
}

transition-property:background-color;	/*指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡*/
transition-duration:0.2s;	/*指定这个过渡的持续时间*/
transition-timing-function:linear;	/*指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier*/
transition-delay:0s;	/*延迟过渡时间*