冰剑'blog

最近css3比较火热，我也从网上看到不少的这方面的信息，发出来大家共享一下：
本文内容转自 前端观察（qianduan.net ） ，我只是总结一下。

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

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

CSS3圆角（所有的）

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

css3圆角 (个别的)

<br/>#roundCornerI{<br/>  font-family: Arial;<br/>  border: 5px solid #dedede;<br/>  -moz-border-radius-topleft: 15px;<br/>  -moz-border-radius-topright: 0px;<br/>  -moz-border-radius-bottomright: 15px;<br/>  -moz-border-radius-bottomleft: 0px;<br/>  -webkit-border-top-left-radius: 15px;<br/>  -webkit-border-top-right-radius: 0px;<br/>  -webkit-border-bottom-left-radius: 0px;<br/>  -webkit-border-bottom-right-radius: 15px;<br/>  padding: 15x 25px;<br/>  height: inherit;<br/>  width: 590px;<br/>}<br/>

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

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

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

<br/>#borderColor {<br/>  border: 10px solid #dedede;<br/>  -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;<br/>  -moz-border-top-colors: #300 #600 #700 #800 #900 #A00;<br/>  -moz-border-left-colors: #300 #600 #700 #800 #900 #A00;<br/>  -moz-border-right-colors: #300 #600 #700 #800 #900 #A00;<br/>  padding: 15px 25px;<br/>  height: inherit;<br/>  width: 590px;<br/>}<br/>

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前缀。

<br/>#backgroundSize{<br/>  border: 5px solid #bd9ec4;<br/>  background:url(image_1.extention) bottom right no-repeat;<br/>  -o-background-size: 150px 250px;<br/>  -webkit-background-size: 150px 250px;<br/>  padding: 15px 25px;<br/>  height: inherit;<br/>  width: 590px;<br/>}<br/>

为了在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多列(宽度)

<br/>#multiColumnWidth {<br/>  text-align: justify;<br/>  -moz-column-width: 20em;<br/>  -moz-column-gap: 2em;<br/>  -webkit-column-width: 20em;<br/>  -webkit-column-gap: 2em;<br/>}<br/>

CSS3多列(列数)

<br/>#multiColumnCount {<br/>  text-align: justify;<br/>  -moz-column-count: 3;<br/>  -moz-column-gap: 1.5em;<br/>  -moz-column-rule: 1px solid #dedede;<br/>  -webkit-column-count: 3;<br/>  -webkit-column-gap: 1.5em;<br/>  -webkit-column-rule: 1px solid #dedede;<br/>}<br/>

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

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

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