css3

css3边框：

border-radius：属性，添加像素，可以使边框角变圆，50px的边框为半圆形，50%则会变成一个椭圆形。

box-shadow: 属性，添加像素，颜色，例；

出现的形状如图所示,代表距离左30px，距离下0px,颜色则是黄色

出现的形状如图所示，代表距离左0px;距离下30px;颜色则是灰色

在后面再加一个10px,则阴影部分会虚化，也就是会模糊

再在后面加个inset,则阴影部分和蓝色部分进行了颜色交换，并且只显示里面的部分，inset是设置在里面的意思

border-imager属性，可以允许使用图片作为边框，但border-imager属性在IE和QQ浏览器中并不兼容。

Css背景：

background-size属性，可以规定背景图片的尺寸

background-origin属性，规定根据边框定位还是文本定位；

background-origin:border-box;根据边框定位

background-origin:content-box;根据文本定位

多重背景图片，background-imager

两张背景图重叠，第一张为优先级

如果不加background-repeat,则两个背景图会铺满整个屏幕

给文字加阴影：

text-shadow属性，可以向文本应用阴影效果

四个值，分别代表距离左侧，距离上侧，模糊程度及阴影颜色

效果如图所示。

文本自动换行：word-wrap属性，允许文本强制文本进行换行，这意味着会对单词进行拆分，它的值是break-word允许对单词进行拆分换到下一行

CSS3 转换：

可以对元素进行移动、缩放、移动、拉长或拉伸。

可以使用2D或3D转换来转换我们的元素

2D转换：

transform属性，内置方法

1、rotate()进行旋转，括号内部写旋转角度，默认顺时针旋转，允许负值，元素将进行逆时针旋转。

如图所示，里面的文字也会跟着一起旋转，deg是度的意思

2、translate()从当前位置进行移动，括号内为x、y值，允许负值，将反方向移动

如图所示，移动位置不光可以用定位移动，还可以xy轴移动

3、scale()改变原始尺寸，按照倍数变化，括号内为widch、height的倍数

如图所示，改变元素的倍数，里面的文字也随之改变

4、skew()水平、垂直方向进行扭转，括号内是水平扭转角度、垂直扭转角度

<div style=" 100px; height:100px; transform:skew(0deg,30deg); margin:50px ">纵向扭转30度</div>
<div style="100px; height:100px; transform:skew(30deg,0deg); margin:100px">横向扭转30度</div>
<div style="100px; height:100px; transform:skew(30deg,30deg); margin:100px">横向纵向都扭转30度</div>

如图所示，里面的文字也会随之变化

3D转换：

transform属性，变形、转换，内置方法：

1、rotateX(),沿水平x轴进行垂直的翻转，括号内写转动度数

2、rotateY(),沿垂直Y轴进行水平的翻转，括号内写转动度数

2D转换和3D转换的区别：2D转换仅仅在于平面，文字可以看出并没有反过来

3D转换是相当于镜面效果的，进行了前后空间（涉及到了Z轴）的占用进行的翻转

如图所示，3D翻转，像镜面一样，字也是反的

CSS3过渡：transition属性，专门应对颜色、长度、宽度、位置等变化过渡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
#a1
{ width:200px; height:100px; background-color:#909; border:1px solid #000}
#a2
{ width:200px; height:100px; background-color:#909;border:1px solid #000; transition:2s}
#a1:hover{ background-color:#969}
#a2:hover{ background-color:#99C}
#bg
{ width:200px; height:200px; border:1px solid #000; position:relative; left:400px}
#tb
{ position:relative; left:0px; top:0px; transition:1s}
#tb:hover{ left:-200px}
#tb:active{ left:-400px}
#c1
{ width:200px; height:200px; background-color:#09F; transition:1s}
#c1:hover{ width:300px; height:400px}
</style>
<body>
    <div id="a1">这是快速变得</div>
    <div id="a2">使用过渡的</div>
<br />
<br />
<div id="bg">
<table id="tb" width="600" height="200" cellspacing="0" cellpadding="0">
<tbody>
<tr>
    <td><img src="201291893228996.jpg"  width="200" height="200" /></td>
    <td><img src="1655299809.jpg"  width="200" height="200" /></td>
    <td><img src="20130109080830267.jpg"  width="200" height="200" /></td>

</tr>
</tbody>
</table>
<div>
<br /><br />
<div id="c1" ></div>
</body>
</html>

代码如上，图片如下：

CSS3动画：

通过CSS3，我们能够创建动画，这样可以在许多网页中取代动画图片、Flash动画以及JavaScript动画。

想要创建CSS3动画，需要遵循@keyframes规则。

@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

注：IE需要10及以上。

创建好动画之后需要绑定到某个选择器，否则不会产生任何动画效果。

使用animation进行动画捆绑。两个值：动画名称、时长。

时间长度必须规定，否则默认为0。也就是表示没有动画效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">

#c2{ width:300px; height:300px; background-color:#C0C; animation:myfirst 5s}
@keyframes myfirst
{ 
from{ background-color:#C0C}
to{ background-color:#C9F}

}
</style>
<body>

<div id="c2"></div>
</body>
</html>

动画是使元素从一种样式逐渐变化为另一种样式的效果。

可以改变任意多的样式以及任意多的次数。

我们一般情况下使用0%~100%来规定动画发生的时机。或者使用关键词from...to...，效果等同于0%~100%。

0%是动画的开始，100%是动画的完成。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">

#c2{ width:300px; height:300px; background-color:#C0C; animation:myfirst 5s}
@keyframes myfirst
{ 
0%{ background:#F00}
15%{ background:#F90}
25%{ background:#FF0}
35%{ background:#3F6}
55%{ background:#6FF}
65%{ background:#63F}
100%{ background:#C00}
}
</style>
<body>

<div id="c2"></div>
</body>
</html>

多项改变时只需要在每个百分号后的花括号内写上就可以了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
    width:300px;
    height:300px;
    background:black;
    position:relative;/*由于需要进行位置改变，所以增加了position属性*/
    animation:myfirst 5s infinite alternate;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行，交替执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0%   {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25%  {background:yellow; border-radius:0px; left:400px; top:0px;}
50%  {background:blue; border-radius:90px; left:400px; top:300px;}
75%  {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}

</style>
</head>

<body>
本示例中，更改了背景颜色以及定位、阴影效果三个样式。<br />
由于本动画在捆绑选择器时添加了一个infinite值，那么本动画将无限执行下去。<br />
在无限执行的基础之上增加了一个alternate值，那么本动画会进行正反交替执行。
<div></div>
</body>
</html>