CSS3效果集锦

转自:http://www.cnblogs.com/suihui/archive/2012/12/13/2816508.html

*
*

一、前缀:

-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(image1.extention) top right no-repeat, url(image2.extention) bottom right no-repeat;
#backgroundMultiple{
border: 5px solid #9e9aab;
background:url(image1.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; }