首页 > 代码库 > CSS3 系列教程

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

CSS3 系列教程