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; }