CSS3新特性解析-优快云博客

本文链接：https://blog.youkuaiyun.com/shengming0302/article/details/75234535

这里写图片描述
CSS即层叠样式表（Cascading StyleSheet），在制作网页的时候我们通常采用CSS对页面的布局、字体、颜色还有其他的效果实现提供更加精确的控制。CSS3是CSS的升级版本，今天就简单介绍一下CSS3几个重要的新特性。

CSS3选择器
CSS设置的属性之所以能绑定到相应的节点依靠的就是CSS选择器。

代码段1.CSS选择器
body > .mainContainer div > span[5] {
        background-color : white;
        ……
}

此处CSS选择器为：“body > .mainContainer div > span[5]”代表的路径
即为：“body”标签直接子元素里class属性值为“mainContainer”的所有元素的，
后继元素标签为“div”的所有直接子元素中，
第5个标签为“span”的元素。

现在CSS3提供了更多更加方便快捷的选择器。

代码段2.CSS3选择器
body > .mainContainer tbody:nth-child(even){
        background-color : white;
}
body > .mainContainer tbody:nth-child(odd){
        background-color : black;
}

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

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

如上，列举了常用的几种CSS3选择器，这些新特性解决了许多之前需要用javascript解决的问题。
tbody : nth-child(even)，nth-child(odd)：此处分别表示了表格（tbody）下面的偶数行和奇数行（tr），这种样式适用于表格，可以清晰看出行与行的差别。正常使用也相较于之前的版本更加易于理解。
:not(.textinput)：这里表示所有class属性不包括“textinput”的节点。
div : first-child : 表示所有div节点下的第一个直接子节点

除此之外，还有许多新增的选择器，如下图所示：
这里写图片描述

@font-face特性
font-face可以用来加载字体样式，相比于老版本的字体加载方式，他不仅可以显示客户端安装的字体，也可以加载服务器端的字体。

代码段3.CSS字体设置
<p><font style =“font-family : arial”> arial curier verdana </font></p>

代码段4.CSS3字体设置
/*客户端字体*/
<p><font face=“arial”> arial curier verdana </font></p>

/*服务器端字体*/
@font-face{
        font-family : Runic;
        src : url(RUNICMTO.eot);
}
.event{
        font-size : 110px;
        color : black;
        font-familt : “Runic”
}

代码段4中声明了服务器端字体Runic指向字体源“RUNICMTO.eot”文件，并冠以“Runic”的字体名称。
这项新特性的优点在于如果开发过程中需要使用特殊字体，而又不确定客户端是否安装该字体时，可以使用这种方式开发。

CSS3渐变效果
为了实现一些酷炫的界面，单一的颜色设置是不足以的，CSS3提供了颜色渐变的效果，如果可以灵活运用，可以实现不一样的特效。
linear-gradient( gradient_line, color1, color2, … )

线性渐变

代码段5.线性渐变
background-image:
-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

这里写图片描述

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

这里写图片描述
第一段代码gradient-line表示渐变方向，此处水平渐变即为linear，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。第二段代码中“color-stop”为拐点，是一个33%处为绿色，66%处为橙色的水平渐变。

径向渐变

代码段6径向渐变
backgroud: 
-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

这里写图片描述
这一段代码中，redial代表径向渐变，不是从一个点到一个点的渐变，而是从一个圆到一个圆的渐变。
需要注意的是径向渐变是由外到内的渐变，“50 50，50”表示起始圆的圆心和半径，“50，50，0”是目标圆的圆心和半径。代码段中标识的两个同心圆外圆半径为 50px，内圆半径为 0，那么就是从黑色到红色再到蓝色的正圆形渐变。
当然不一定两个圆的圆心就是重合的，可以尝试一些骚操作，比如说让目标圆圆心偏移，可以实现来自顶部的漫射光，类似于开了盏灯的效果。

代码段7.漫射光
backgroud:
-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));

这里写图片描述

CSS3的Transitions
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

代码段8.transition
<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）。

CSS3的Transform
Transform所能实现的有拉伸，压缩，旋转，偏移等图形的基本变换，过程不难，我们根据代码来看。

代码段9.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); 
}