CSS3 系列教程
一、前缀：
-moz(例如 -moz-border-radius)用于Firefox
-webkit(例如：-webkit-border-radius)用于Safari和Chrome。
二、CSS3圆角（所有的）
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
三、CSS3圆角(个别的)
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;
四、CSS3中的边框颜色：
使用CSS3的border-radius属性，如果你设置了border的宽度是X px，
那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。
如果说你的border的宽度是10个像素，但是只声明了5或6中颜色，那么最后一个颜色将被添加到剩下的宽度。
目前只有Firefox支持CSS3 border-colour属性，所以我们这里只需使用-moz前缀。
-moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-left-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
五、阴影
大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。
CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx;
Apx = x轴
Bpx = y轴
Cpx = 投影长度
#XXX = 像通常一样的颜色
#boxShadow{
border: 5px solid #111;
-webkit-box-shadow: 5px 5px 7px #999;
-webkit-border-bottom-right-radius: 15px;
padding: 15px 25px;
height: inherit;
width: 590px;
}
六、简单文字阴影
.textShadowSingle {
font-size: 3.2em;
color: #F5F5F5;
text-shadow: 3px 3px 7px #111;
text-align: center;
}
七、多重文字阴影：
.textShadowMultiple {
font-size: 3.2em;
color: #FFF;
text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
text-align: center;
padding: 10px 0px 5px 0px;
background: #151515;
}
八、背景图片/纹理
CSS3的背景图片大小可以写成 background-size:Apx Bpx;
-Apx = x轴(图片宽度)
-Bpx = y轴(图片高度)
最好支持CSS3背景大小的浏览器是Safari和Opera，所以我们只需要使用-o和-webkit前缀。
#backgroundSize{
border: 5px solid #bd9ec4;
background:url(image_1.extention) bottom right no-repeat;
-o-background-size: 150px 250px;
-webkit-background-size: 150px 250px;
padding: 15px 25px;
height: inherit;
width: 590px;
}
九、多背景图片
background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;
#backgroundMultiple{
border: 5px solid #9e9aab;
background:url(image_1.extention) top left no-repeat,
url(image_2.extention) bottom left no-repeat,
url(image_3.extention) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;
}
十、CSS3多列(宽度)
#multiColumnWidth {
text-align: justify;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-webkit-column-width: 20em;
-webkit-column-gap: 2em;
}
十一、CSS3多列(列数)
#multiColumnCount {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #dedede;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #dedede;
}
十二、CSS3嵌入字体
@font-face {
font-family: qianduanNet;
src: url("SketchRockwell.ttf");
}
.fontFace{
font-family: qianduanNet;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}
十三、CSS3透明(例1：层)
div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }
十四、CSS3 RGBA 色彩
div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.rgbaL3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.rgbaL4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.rgbaL5 { background:rgba(153, 134, 117, 1.0); height:20px; }
十五、CSS3 HSL
HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。
Hue衍生于色盘：0和360是红色，接近120的是绿色，240是蓝色。
Saturation值是一个百分比：0%是灰度，100%饱和度最高
Lightness值也是一个百分比：0%是最暗，50%均值，100%最亮。
div.hslL1 { background:hsl(320, 100%, 50%); height:20px; }
div.hslL2 { background:hsl(320, 50%, 50%); height:20px; }
div.hslL3 { background:hsl(320, 100%, 75%); height:20px; }
div.hslL4 { background:hsl(202, 100%, 50%); height:20px; }
div.hslL5 { background:hsl(202, 50%, 50%); height:20px; }
div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }
十六、CSS3 HSLA
div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }
div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }
div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }
div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }
div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }
http://www.blueidea.com/tech/web/2009/6460.asp
