CSS3常用代码

最近几个月一直研究CSS3，它非常强大，虽然内容较多，但是常用的也就那么几个，我这里简单的整理了以下，供大家参考，现在的浮躁的社会，我先发张图吧，有兴趣的可继续往下，没兴趣可早点换台

 

这几个样式都是我用得相当多的样式，熟悉了这几个东西，普通的开发也就偶了，至于更复杂的可以和我私下再交流

 

1.文字阴影

text-shadow: 0 -1px 1px #234403;/*参数：左右偏移量，上下偏移量，偏移像素，颜色*/

 

2.背景渐进

background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#56A00E));
background-image: -webkit-linear-gradient(#ffffff, #56A00E);

/*这两句都是图片渐进，第一句主要针对早期的浏览器，例如安卓2.3，苹果ios4上的浏览器，至于IE，我主要针对安卓、Iphone、Ipad的浏览器开发，IE根本不在我考虑范围内*/

 

3.圆角

border-radius: 8px;

 

4.外阴影/内阴影/四周阴影

box-shadow: 2px 2px 5px #d6e5f1;

box-shadow: -2px -2px 5px #d6e5f1 inset;

-webkit-box-shadow: 0 0 12px #d6e5f1, 0 0 18px #d6e5f1;

/*参数：左右偏移量，上下偏移量，偏移像素，颜色*/

 

5.图片背景

height:30px;
line-height: 28px;

padding-left:10px;
padding-right:10px;
font-size: 14px;
color: white;
cursor: pointer;
background-color:transparent;
text-shadow: 0 -1px 1px #4b4e51;
border-width: 0 4px 0 13px;
-webkit-border-image: url(back_button_bg.png) 0 4 0 13 stretch stretch;

/*这个太强大了，用无数图片拼装按钮样式的时代终于过去了*/

 

6.最后发个从jquery mobile中抠出的CSS动画样式吧，自己试试吧，有惊喜哈，这个动画的运行效率比JS好得多，如果自己用JS写过动画并且在iPhone,iPad,安卓浏览器上跑过的朋友，应该深有体会

/*CSS常用动画*/
@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}

@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}

@-webkit-keyframes slideinfromtop {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}

@-webkit-keyframes slideinfrombottom {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}

.slide_left {
	-webkit-transform: translateX(-100%);
	-webkit-animation-name: slideouttoleft;
	-webkit-animation-duration: 500ms;
	-moz-transform: translateX(-100%);
	-moz-animation-name: slideouttoleft;
	-moz-animation-duration: 500ms;
}

.slide_right {
	-webkit-transform: translateX(100%);
	-webkit-animation-name: slideouttoright;
	-webkit-animation-duration: 450ms;
	-moz-transform: translateX(100%);
	-moz-animation-name: slideouttoright;
	-moz-animation-duration: 450ms;
}

.slide_top {
	-webkit-transform: translateY(-100%);
	-webkit-animation-name: slideinfromtop;
	-webkit-animation-duration: 500ms;
	-moz-transform: translateY(-100%);
	-moz-animation-name: slideinfromtop;
	-moz-animation-duration: 500ms;
}

.slide_bottom {
	-webkit-transform: translateY(100%);
	-webkit-animation-name: slideinfrombottom;
	-webkit-animation-duration: 450ms;
	-moz-transform: translateY(100%);
	-moz-animation-name: slideinfrombottom;
	-moz-animation-duration: 450ms;
}

 

最后就是这个示例的下载链接了：