CSS3 新特性（未完成）

1.Box-sizing

The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.
1.box-sizing:content-box;时 padding 不算在内容盒子里面，如

box-sizing:content-box; 
width: 240px; 
height: 68px; 
padding-top: 10px;

2.box-sizing:border-box;时 padding 算在内容盒子里面

box-sizing:border-box; 
width: 240px; 
height: 68px; 
padding-top: 10px;

2.选择器

CSS3 添加了很多选择器，如

• div 下的第一子节点

div:first-child{ 
  Border-color: red; 
}

• 除了 class 为 textinput 外的其他所有节点

:not(.textinput){ 
  Font-size: 12px; 
}

• table 的偶数行颜色为白色，奇数行颜色为黑色

Body > .mainTabContainer  tbody:nth-child(even){ 
  Background-color: white; 
} 
Body > .mainTabContainer  tbody:nth-child(odd){ 
  Background-color: black; 
}

3.@Font-face 特性

使用 @Font-face 可以让客户端显示客户端所没有安装的字体，如下例子，先定义两个服务端字体，然后下面可以直接使用

@font-face { 
 font-family: BorderWeb; 
 src:url(BORDERW0.eot); 
} 
@font-face { 
 font-family: Runic; 
 src:url(RUNICMT0.eot); 
} 

.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

4.Text-overflow 样式

设置或检索当当前行超过指定容器的边界时如何显示

.ellipsis{
  text-overflow:ellipsis; 
  overflow:hidden; 
  white-space:nowrap; 
  width:200px; 
  background:#ccc;
}
<div class="ellipsis">
当对象内文本溢出时显示省略标记
</div>

结果：

5.文字渲染（Text-decoration）

div { 
 -webkit-text-fill-color: black; 
 -webkit-text-stroke-color: red; 
 -webkit-text-stroke-width: 2.75px; 
}

Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度
效果图：

6.多列布局（multi-column layout）

.multi_column_style{ 
 -webkit-column-count: 3; 
 -webkit-column-rule: 1px solid #bbb; 
 -webkit-column-gap: 2em; 
} 
<div class="multi_column_style"></div>

Column-count：表示布局几列
Column-rule：表示列与列之间的间隔条的样式
Column-gap：表示列于列之间的间隔
效果如下：

7.颜色的透明度

color: rgba(255, 0, 0, 0.75);

8.圆角属性

border-radius: 15px;

9.渐变效果（Gradient）

CSS3 特性