CSS3的一些新特性详细介绍

文章来源于前端观察，感谢作者冰剑 bolg 给我们带来经精彩的文章！

设计教程/前端设计/前端设计2009-09-18

最近css3比较火热，我也从网上看到不少的这方面的信息，发出来大家共享一下.

1.圆角
这里使用css3的border-radius属性。
考虑浏览器的兼容性：

-moz(例如 -moz-border-radius)用于Firefox
-webkit(例如：-webkit-border-radius)用于Safari和Chrome。

CSS3圆角（所有的）

#roundCorderC{
  font-family: Arial;
  border: 5px solid #dedede;
  -moz-border-radius: 15px;/*firefox*/
  -webkit-border-radius: 15px;/*Google chrome、Safari*/
  padding: 15px 25px;
  height: inherit;
  width: 590px;
  }

css3圆角 (个别的)

#roundCornerI{
font-family: Arial;
border: 5px solid #dedede;
-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;
padding: 15x 25px;
height: inherit;
width: 590px;
}

2.边框颜色
为边框的border-color添加更多的色彩。

使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6中颜色，那么最后一个颜色将被添加到剩下的宽度。
CSS3中的边框颜色

这里是一个10px宽的标准边框和边框颜色：

#borderColor {
border: 10px solid #dedede;
-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;
padding: 15px 25px;
height: inherit;
width: 590px;
}

3.阴影

阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。
一般可以分为box-shadow和textshadow两类。
CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx;
Apx = x轴
Bpx = y轴
Cpx = 投影长度
#XXX = 像通常一样的颜色

4.背景
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;
}

为了在CSS3中应用多背景图片，我们使用“,”隔开，例如：
background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;
我们可以在一行代码中尝试放置多个不同的图片…

5.多列

使用CSS3可以为你的网站创建多列，而不用为每列制定特定的层或段落。
由于目前只有Firefox、Safari、Google Chrome，浏览器支持多列，所以要用到-moz和-webkit ，这些浏览器的私有属性了！
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;
}

6.字体
要使用一款字体，我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。

@font-face {
font-family:SketchRockwell ;
src: url("SketchRockwell.ttf");
}

8.透明
关于透明的问题，可以参考我之前写的一篇文章：
透明层和不透明内容：http://www.xunzou.com/blog/article.asp?id=623

进入论坛讨论: http://www.missyuan.com/viewthread.php?tid=420765

情非得已