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;}