css3新增样式介绍

css3新增样式介绍
在PC版开发中由于IE原因，我们很少⽤到css3，但随着平板和智能⼿机进⼊我们的⽣活，以及现在越来越流⾏，在⼿机版和平板版开发中我们就可以⼤胆的使⽤了，下⾯我们探讨常⽤⼏个css3属性：
1.css3前缀使⽤介绍，我们直接看个例⼦：
Java代码
1. -webkit-transform:rotate(-3deg); // 给Chrome和Safari等webkit内核的浏览器使⽤
2. -moz-transform:rotate(-3deg); // 给Firefox浏览器使⽤
3. -ms-transform:rotate(-3deg); // 给IE浏览器使⽤
4. -o-transform:rotate(-3deg); // 给Opera浏览器使⽤
5. transform:rotate(-3deg); // 给⽀持css3浏览器使⽤
2.在学习css3属性时第⼀个肯定会想到圆⾓，因为css2中要切⼀张张⼩图拼接还要⼤量css代码控制还要考虑兼容很⿇烦但是到css3后只要这个属性”border-radius”就能实现圆⾓，来看⼀个简单例⼦：
Java代码
1. border-radius:5px; //设置4个⾓且圆⾓半径长度为5px;
2. border-top-left-radius:5px; //设置上左第⼀个⾓且圆⾓半径长度为5px;其他使⽤我们可以参考⼿册，⽤起来很简单
3.简单的阴影让我们从向你展⽰为⽹页中的任意元素添加阴影效果是多么的简单开始吧。

下⾯的代码⽚段将演⽰⼀个轻微旋转并有阴影的图⽚，这两个效果都是使⽤CSS添加的。

Java代码
1. <img src="megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />
上⾯的代码中，transform CSS 属性实现图⽚旋转，box-shadow属性为图⽚添加阴影效果。

你可以改变旋转的⾓度，或者是阴影的参数，仅仅调整那些参数就OK了。

尝试⼀下，你将看到下⾯演⽰的旋转图⽚效果。

box-shadow可以设置6个参数： <length>①：第1个长度值⽤来设置对象的阴影⽔平偏移值。

可以为负值 <length>②：第2个长度值⽤来设置对象的阴影垂直偏移值。

可以为负值 <length>③：如果提供了第3个长度值则⽤来设置对象的阴影模糊值。

不允许负值 <length>④：如果提供了第4个长度值则⽤来设置对象的阴影外延值。

不允许负值 <color>：设置对象的阴影的颜⾊。

inset：设置对象的阴影类型为内阴影。

该值为空时，则对象的阴影类型为外阴影
4.元素变换刚才我们在阴影介绍中提到transform的使⽤，下⾯我们在来看⼀个例⼦，⿏标滑过图⽚放⼤：
Java代码
1. <img src="megan.jpg" />
2. <style>
3. img { -webkit-transform: scale(0.5); }
4. img:hover { -webkit-transform: scale(1); }
5. </style>
⿏标滑过图⽚，它就会弹出并变⼤，如下所⽰。

将⿏标从图⽚上挪开，图⽚⼜会恢复原状。

我们来看⼀下transform各各参数意思：
Java代码
1. transform:translate(10px,10px) //该元素⽔平和垂直各移动10个像素
2. transform:rotate(10deg) //该元素旋转10度
3. transform:scale(2) //该元素放⼤两倍
4. transform:skew(10deg,10deg) //该元素对应X轴和Y轴斜切扭曲10度
下节我们⼀起探讨动画（transition）和渐变（gradient）的使⽤。