CSS3新增属性

CSS3

一、CSS选择器

1.CSS1定义的选择器

2. CSS2定义的选择器

3. CSS3新增属性选择器

4. 结构伪类选择器

5. UI状态伪类选择器

6. CSS3其他选择器

二、@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" }

三、Word-wrap & Text-overflow 样式

.clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
   width:200px;background:#ccc;} 
 .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 
   width:200px; background:#ccc;} 
 <div class="clip"> 
  不显示省略标记，而是简单的裁切条
 </div> 
 <div class="ellipsis"> 
  当对象内文本溢出时显示省略标记
 </div>

四、文字渲染（Text-decoration）

div { 
 -webkit-text-fill-color: black;  /*文字内部填充颜色*/
 -webkit-text-stroke-color: red;  /*文字边界填充颜色*/
 -webkit-text-stroke-width: 3px;  /*文字边界宽度*/
 }

五、CSS3 的多列布局（multi-column layout）

.multi_column_style{ 
-webkit-column-count: 3;   /*表示布局几列*/
-webkit-column-rule: 1px solid #bbb;  /*表示列与列之间的间隔条的样式*/
-webkit-column-gap: 2em;  /*表示列于列之间的间隔*/
 } 

六、边框和颜色（color, border）

color: rgba(255, 0, 0, 0.75); 
background: rgba(0, 0, 255, 0.75);
color: hsla( 112, 72%, 33%, 0.68);
border-radius: 15px;

七、CSS3 的渐变效果（Gradient）和背景图片

1.线性渐变
左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：

background: #08c;
background: -moz-linear-gradient(top,  #0fc 0%, #08c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0fc), color-stop(100%,#08c));
background: -webkit-linear-gradient(top,  #0fc 0%,#08c 100%);
background: -o-linear-gradient(top,  #0fc 0%,#08c 100%);
background: -ms-linear-gradient(top,  #0fc 0%,#08c 100%);
background: linear-gradient(top,  #0fc 0%,#08c 100%);

这里 linear 表示线性渐变，从上到下，由红色（#f55b3c）到红色（#d04439）的渐变；同理，也可以有从上到下，任何颜色间的渐变转换。
2. 复杂线性渐变

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
        color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

这里的“color-stop”为拐点.
3. 径向渐变（目标圆半径为 0）

backgroud: 
 -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

前面“50,50,50”是起始圆的圆心坐标和半径，“50,50,0”蓝色是目标圆的圆心坐标和半径，“color-stop(0.5,red)”是断点的位置和色彩。这里需要说明一下，和放射由内至外不一样，径向渐变刚好相反，是由外到内的渐变。清单 15 标识的是两个同心圆，外圆半径为 50px，内圆半径为 0，那么就是从黑色到红色再到蓝色的正圆形渐变。
4.背景图片
（1）Background Clip

• background-clip: border-box; 背景从 border 开始显示 ;
• background-clip: padding-box; 背景从 padding 开始显示 ;
• background-clip: content-box; 背景显 content 区域开始显示 ;
• background-clip: no-clip; 默认属性，等同于 border-box;

（2）background-position（就像 background-clip）。

• background-origin: border-box; 从 border. 开始计算 background-position;
• background-origin: padding-box; 从 padding. 开始计算 background-position;
• background-origin: content-box; 从 content. 开始计算 background-position;

（3）background-size

• background-size: contain; 缩小图片以适合元素（维持像素长宽比）
• background-size: cover; 扩展元素以填补元素（维持像素长宽比）
• background-size: 100px 100px; 缩小图片至指定的大小 .
• background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

（4）Background Break

• background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是一个整体一 样）
• background-break: bounding-box; 把盒之间的距离计算在内；
• background-break: each-box; 为每个盒子单独重绘背景。

5.多背景图片

div { 
 background: url(src/zippy-plus.png) 10px center no-repeat,
  url(src/gray_lines_bg.png) 10px center repeat-x; 
 }

此为同一元素两个背景的案例，其中一个重复显示，一个不重复。参考一下效果图：

八、CSS3 的阴影（Shadow）和反射（Reflect）效果

1.元素和文字的阴影

.class1{ 
 text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
 } 
 .class2{ 
 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
 }

2.反射

 .classReflect{ 
 -webkit-box-reflect: below 10px 
 -webkit-gradient(linear, left top, left bottom, from(transparent), 
      to(rgba(255, 255, 255, 0.51))); 
 }

设置也很简单，大家主要关注“-webkit-box-reflect: below 10px”，他表示反射在元素下方 10px 的地方，再配上渐变效果，可见效果图如下：

九、CSS3 的盒子模型

<div class="boxcontainer"> 
    <div class="item"> 1 </div> 
    <div class="item"> 2 </div> 
    <div class="item"> 3 </div> 
    <div class="item flex"> 4 </div> 
</div>
<style>
.boxcontainer { 
    width: 1000px; 
    display: -webkit-box; 
    display: -moz-box; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
} 
.item { 
    background: #357c96; 
    font-weight: bold; 
    margin: 2px; 
    padding: 20px; 
    color: #fff; 
    font-family: Arial, sans-serif; 
}
</style>

注意这里的“display: -webkit-box; display: -moz-box;”，它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型。注意这里的“-webkit-box-orient: horizontal;”，他表示水平排列的盒子模型。此时，我们会看到如下效果：

细心的读者会看到，“盒子”的右侧多出来了很大一块，这是怎么回事呢？让我们再来看一个比较有特点的属性：“flex”， 参考如下代码：

.flex { 
     -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
 }

看到什么区别了没？在第四个“item 元素”那里多了一个“flex”属性，直接来看看效果吧：

第四个“item 元素”填满了整个区域，这就是“flex”属性的作用。如果我们调整一下“box-flex”的属性值，并加入更多的元素，见如下代码：

<div class="boxcontainer"> 
    <div class="item"> 1 </div> 
    <div class="item"> 2 </div> 
    <div class="item flex2"> 3 </div> 
    <div class="item flex"> 4 </div> 
</div>
 .flex { 
     -webkit-box-flex: 1; 
     -moz-box-flex: 1; 
 } 
 .flex2 { 
     -webkit-box-flex: 2; 
     -moz-box-flex: 2; 
 }

我们把倒数第二个元素（元素 3）也加上“box-flex”属性，并将其值设为 2，可见其效果图如下：

由此可见，元素 3 和元素 4 按比例“2:1”的方式填充外层“容器”的余下区域，这就是“box-flex”属性的进阶应用。

还有，“box-direction”可以用来翻转这四个盒子的排序，“box-ordinal-group”可以用来改变每个盒子的位置：一个盒子的 box-ordinal-group 属性值越高，就排在越后面。盒子的对方方式可以用“box-align”和“box-pack”来设定。

十、CSS3 的 Transitions, Transforms 和 Animation Transitions

1.transition

• transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡
• transition-duration：用于指定这个过渡的持续时间
• transition-delay：用于制定延迟过渡的时间
• transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

<div id="transDiv" class="transStart"> transition </div> 
 .transStart { 
    background-color: white; 
    -webkit-transition: background-color 0.3s linear; 
    -moz-transition: background-color 0.3s linear; 
    -o-transition: background-color 0.3s linear; 
    transition: background-color 0.3s linear; 
 } 
 .transEnd { 
    background-color: red; 
 }

这里他说明的是，这里 id 为“transDiv”的 div，当它的初始“background-color”属性变化时（被 JavaScript 修改），会呈现出一种变化效果，持续时间为 0.3 秒，效果为均匀变换（linear）。如：该 div 的 class 属性由“transStart”改为“transEnd”，其背景会由白（white）渐变到红（red）。

2.Transform

.skew { 
 -webkit-transform: skew(50deg);  /*倾斜*/
 } 
 .scale { 
 -webkit-transform: scale(2, 0.5); /*缩放*/
 } 
 .rotate { 
 -webkit-transform: rotate(30deg); /*旋转*/
 } 
 .translate { 
 -webkit-transform: translate(50px, 50px); /*平移*/
 } 
 .all_in_one_transform { 
 -webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); /*综合*/
 }

3.Animation

 @-webkit-keyframes animname { 
    0% { 
        Opacity: 0; 
 Font-size: 12px; 
    } 
    100% { 
        Opacity: 1; 
 Font-size: 24px; 
    } 
 } 
 .anim1Div { 
    -webkit-animation-name: animname ; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: 4; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-timing-function: ease-in-out; 
 }

首先，定义动画的内容，定义动画“animname”，变化方式为由“透明”（opacity: 0）变到“不透明”（opacity: 1），同时，内部字体大小由“12px”变到“24px”。然后，再来定义 animation 的变化参数，其中，“duration”表示动画持续时间，“iteration-count”表示动画重复次数，direction 表示动画执行完一次后方向的变化方式（如第一次从右向左，第二次则从左向右），最后，“timing-function”表示变化的模式。

其实，CSS3 动画几乎支持所有的 style 变化，可以定义各种各样的动画效果以满足我们用户体验的需要。

结语：

这里介绍的 CSS3 主要的新特性，这些特性在 Chrome 和 Safari 中基本都是支持的，Firefox 支持其中的一部分，IE 和 Opera 支持的较少