CSS3新特性

最近研究css3一些新的特性,在这里和大家一起学习，一起分享，总的来说，CSS3有一下几大特性：

1.CSS3选择器

2.CSS3多背景

3.CSS3阴影

4.CSS3渐变

5.CSS3 transition 过度

6.CSS3 @keyframes 动画

7.CSS3 transform 变换

8.CSS3 @font-face字体

9.CSS3多列布局

10.CSS3圆角

一、CSS3选择器

css3选择器主要分为属性选择器和伪类选择器

一（1）属性选择器

div[name$='cc']{
	/*name属性以cc结尾*/
}
div[name*='bb']{
	/*name属性包含bb*/
}
div[name^='aa']{
	/*name属性以aa开头*/
}

一（2）伪类选择器

li:nth-of-type(even){
	/*选择同类型li的偶数行*/
}
li:nth-of-type(odd){
	/*选择同类型li的奇数行*/
}
li:nth-child(n){
	/*参数为n，表示选中所有行*/
}
li:nth-child(n+i){
	/*参数为n+i时表示从第i行开始下面的都被选中*/
}
li:nth-child(2n){
	/*2n表示2的倍数行被选中，即偶数行*/
}
li:nth-child(3n){
	/*3n表示3的倍数行被选中。*/
}
li:nth-last-child(n){
	/*nth-last-child和nth-child相反，倒着数就行了*/
}

二、CSS3多背景

在CSS3中background-image可以设置为多个背景，以及每个背景的位置，例如：

div{
	background: url() no-repeat left center,url() no-repeat left center,url() no-repeat left center,url() no-repeat left center;
}

三、CSS3阴影

CSS3阴影可以分为文本阴影（text-shadow）和阴影（box-shadow）

三（1）文本阴影（text-shadow）

p{
	color: red;
	-webkit-text-shadow: 3px 3px 3px #eee;
	-moz-text-shadow: 3px 3px 3px #eee;
	-o-text-shadow: 3px 3px 3px #eee;
	-ms-text-shadow: 3px 3px 3px #eee;
	text-shadow: 3px 3px 3px #eee;
}

注意，由于各大浏览器对css3新特性的支持不同，需要在前面加上前缀，其有四个参数，分别为：1.横向偏移量 2.纵向偏移量 3.模糊半径（数值越高越模糊，反之越清晰）4.阴影颜色

三（2）块级阴影（box-shadow）

p{
	color: red;
	-webkit-box-shadow: 3px 3px 3px #eee;
	-moz-box-shadow: 3px 3px 3px #eee;
	-o-box-shadow: 3px 3px 3px #eee;
	-ms-box-shadow: 3px 3px 3px #eee;
	box-shadow: 3px 3px 3px #eee;
}

box-shadow有6个参数。1.投影方式（可选），不写默认外部阴影，inset代表内阴影 2&3.表示偏移量，与文字阴影类似 4.模糊半径（可选）5.阴影扩展半径（可选），值越大阴影范围越大 6.阴影颜色

当然，也可以有多级阴影：

p{
	color: red;
	box-shadow: 3px 3px 3px #eee,3px 3px 6px #red,3px 3px 9px #black;
}

四、 CSS3渐变

CSS3渐变分为线性渐变（linear-gradient）和径向渐变（radial-gradient）

四（1）线性渐变（linear-gradient）

做渐变时要用到backgroud-image，因为绘制渐变时，会被浏览器解析成为一张背景图片。

渐变第一个参数为起始位置：left表示从左到右 top表示从上到下，以此类推。之后可以设置多个颜色，颜色后可以设置渐变的起始位置（用百分比）。

p{
	width: 100%;
	height: 20px;
	background-image: -webkit-linear-gradient(left,red %10,black %80);
	background-image: linear-gradient(left,red %10,black %80);
}

四（2）径向渐变（radial-gradient）

径向渐变，顾名思义，是按圆的半径方向渐变

p{
	width: 100%;
	height: 20px;
	background-image: -webkit-radial-gradient(left center,red %10,black %80);
	background-image: radial-gradient(left center,red %10,black %80);
}

五、 CSS3 transition 过度

过渡，渐变的可视化，transition一共四个参数，当然不要忘记，要加上前缀，分开单独写这里就不介绍了

1.渐变属性，包括none：停止渐变，all：默认值，元素产生任何属性值变化时都执行渐变效果，通常情况下都用all， indent：指定元素的某一属性值；

2.渐变过程的持续时间，默认值为0；

3.变化的速率，ease：逐渐变慢，linear：匀速，ease-in：加速，ease-out：减速，ease-in-out：先加速后减速，cubic-bezier：自定义；

每个属性都可以设置其具体的贝塞尔曲线值，不过一般情况下用linear匀速就足够了，太另类显得非主流。

4.变化的延迟时间。

div{
	width: 200px;
	height: 200px;
	color: red;
}
div:hover{
	width: 400px;
	height: 400px;
	color: blue;
	-webkit-transition: all .5s linear .5s;
	transition: all .5s linear .5s;
}

六、 CSS3 @keyframes 动画

CSS3自带动画特性，可以不借助JS来完成一些简单的动画效果。

首先创建动画规则，最开头用@符号，后接浏览器前缀，后接keyframes，之后是自己定的动画名称。from表示起始状态，to表示结束状态，大括号内写CSS样式。

定义完动画规则后，在你想要加入该动画的元素上添加animation。共有4个参数：1.自定义的动画名称 2.动画完成所用时间 3.动画延迟4.infinite表示循环播放动画 5.变化速率。

@-webkit-keyframes first{
from{left: 0;top: 0;}
to{left: 100px;top: 100px;}
}
@-moz-keyframes first{
from{left: 0;top: 0;}
to{left: 100px;top: 100px;}
}
@-ms-keyframes first{
from{left: 0;top: 0;}
to{left: 100px;top: 100px;}
}
div{
	width: 100px;
	height: 100px;
	position: absolute;
	background: red;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	animation: first .5s 100ms infinite linear;
}

当然，@keyframes动画也可以以百分比的形式来写

@-webkit-keyframes first{
	0% {left: 0;top: 0;}
	50% {left: 50px;top: 50px;}
	100% {left: 100px;top: 100px;}
}

七、CSS3 transform 变换

transform共五中变换形式

1.移动translate

2.旋转rotate

3.缩放scale

4.扭曲skew

5.矩阵matrix

七（1）移动translate

div{
	width: 100px;
	height: 100px;
	background: gold;
	-webkit-transform: translate(100px,0);
	-moz-transform: translate(100px,0);
	transform: translate(100px,0);
}

还可以写成translateX(x) translateY(y),表示只横向或纵向移动，括号里仅有一个参数。

七（2）旋转rotate

div{
	width: 100px;
	height: 100px;
	background: gold;
	/*顺时针旋转45度，负值为逆时针旋转*/
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

七（3）缩放scale

div{
	width: 100px;
	height: 100px;
	background: gold;
}
div:hover{
	/*放大2倍，scale(X,Y),其中X,Y表示横、纵向缩放倍数，基值为1。若大于1表示放大，
	 *小于1表示缩小，如scale(0.8,2.5)表示横向缩小到0.8倍，纵向放大到2.5倍。
	 * 与translate类似，缩放也可以单方向：scaleX(x)&scaleY(y)。
	 * */
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	transform: scale(2);
}

七（4）扭曲skew

div {
	width: 100px;
	height: 100px;
	background-color: seagreen;
	-webkit-transform: skew(30deg,30deg);
}

扭曲skew这个属性还真的不好说，当然它可以用两个参数，表示X横向扭曲，Y纵向扭曲，也可以只写一个方向skewX(),skewY，至于矩阵变换有兴趣的同学可以去加深研究一下，这些东西在平时已经够用了。

八、CSS3 @font-face字体

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

在开发中经常用到的iconfont就是其中的一种运用方式：

/*iconfont图标设置*/
@font-face {
	font-family: "iconfont";
	src: url('iconfont.eot');
	/* IE9*/
	src: url('../font/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../font/iconfont.woff') format('woff'), /* chrome, firefox */
	url('../font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
	url('../font/iconfont.svg#iconfont') format('svg');
	/* iOS 4.1- */
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
}

九、 CSS3多列布局

column多列布局有一下属性：

column-count：表示布局几列。

column-rule：表示列与列之间的间隔条的样式

column-gap：表示列于列之间的间隔

以webkit内核为例：

.column_style{ 
	-webkit-column-count: 3; 
	-webkit-column-rule: 1px solid #bbb; 
	-webkit-column-gap: 2em; 
}

十、 CSS3圆角

圆角border-radios这一特性应用非常广泛，还可以用圆角来画圆形。其参数可以是1到4个：

1个参数表示四个角都应用该值；

2个参数表示左上、右下用第一个值，右上、左下用第二个值；

3个参数表示左上用第一个值，右上、左下用第二个值，右下用第三个值；

4个参数表示四个值依次用在左上、右上、右下、左下（逆时针）。

div{
	width: 100px;
	height: 100px;
	background: red;
	/*你猜是什么形状*/
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}