CSS3之初始

我相信所有的新技术都是为了解决某些现存的痛点，CSS3的出现也不例外。

仅需要几行代码，CSS3可以创造出各种效果：圆角、背景渐变、文字阴影、盒阴影、

自定义字体以及多重背景图片（当然，这个效果确实需要图片）。如果这还不够神奇，

甚至我们之前需要依赖 JavaScript的一些基本交互效果如悬停动画，也可以使用纯 CSS3

来实现。

一、Internet Explorer 6 到 8 对CSS3 的支持

老版本的 IE（IE 6、7、8）几乎不支持 CSS3的新特性

我个人而言，目前我主要将 CSS3用作增强网站，而不是用它提供基本功能。

 

二、CSS3解析规则

 .round {

 2 border-radius: 10px;

 3 } 

 

这条规则由选择器（ .round ）和声明（ border-radius: 10px; ）组成。而声明则由属
性（ border-radius: ）和值（ 10px; ）组成。

 

三、私有前缀及其用法

.round{
    -khtml-border-radius: 10px; /* Konqueror */
    -rim-border-radius: 10px; /* RIM */
    -ms-border-radius: 10px; /* Microsoft */
    -o-border-radius: 10px; /* Opera */
    -moz-border-radius: 10px; /* Mozilla (如 Firefox) */
    -webkit-border-radius: 10px; /* Webkit (如 Safari 和 Chrome) */
    border-radius: 10px; /* W3C */
}

样式表中后出现的属性优先级高于之前出现的同名属性。

四、实例：CSS3多栏布局

需求：将一整段文本显示在多个栏位中

在 CSS3出现之前，你必须将内容拆分到不同的标签中，然后分别设定样式。

<div id="main">
<p>lloremipsimLoremipsum dolor sit amet, consectetur
// 任意文字 //
</p>
</div>

CSS3：

 #main {  column-width: 12em;  } 

效果如下：

1024视口：

768视口：

如果你想保持栏位数量不变而让栏位宽度根据视口自动调整：

 #main {  column-count: 4;  } 

 增加栏位间隙和分割线可以让多列布局的效果更好：

#main {
    column-gap: 2em;
    column-rule: thin dotted #999;
    column-width: 12em;
}