表格宽度：
border-radius:10px 是否圆角
文本效果：
text-shadow: 您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
text-shadow: 5px 5px 5px #FF0000;
背景：
background:
background-size:100%
background-color:
background-image:
background-repeat:no-repeat || repeat-x || repeat-y
CSS3 2D变化
transform 可以移动、比例化、反过来、旋转、和拉伸
IE9 要使用transform 前面必须加上 -ms-
translate(x,y) 这样可以就可以移动位置了，根据左(X轴)和顶部(Y轴)位置给定的参数
translate(50px,100px);
translate3d(50px,100px); 这也是移动位置
rotate() 角度变化 ，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转
rotate(40deg);
//以下两项用的比较少
scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数;
transform: scale(2,4);
transform: scale(2); //如果没有y的话，那么执行操作，就是x、y同事缩放或放大2倍。
transform:scaleX(2) //只是x发生变化
transform:scaleY(2) //只是y发生变化。
skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：
transform: skew(30deg,20deg);
过渡：
transition 添加某种效果可以从一种样式转变到另一个的时候
transtion: all 2s
animation 动画
<style>
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst {
/* Safari and Chrome */
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
-----------------------------------------------------------------------
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
可以分出来在25%的时候，显示成什么样
-----------------------------------------------------------------------
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
定义一个div框 从坐标0 0 开始运动 然后再回到坐标 0 0
-----------------------------------------------------------------------
CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
实例代码：
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
就是这样，这个div在鼠标经过的时候就会慢慢的从100px扩展到300px
变化
transition:all
字体使用：
<style>
@font-face{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div{
font-family:myFirstFont;
}
</style>
浏览器之间的差距:
-webkit-：这是谷歌浏览器
-moz-：这是火狐浏览器
-o-：这是opera浏览器
标准：这是标准的
怎么写：举例说明一下
background:-webkit-linear-gradient(red,blue);
background:-moz-linear-gradient(red,blue);
background:-o-linear-gradient(red,blue);
background:linear-gradient(red,blue);
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
}
<h3>线性渐变 - 对角</h3>
<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
具体使用按照： http://www.runoob.com/css3/css3-gradients.html
-------------------------------------------------------------------
animation：动画
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
问：当在一个div中使用margin时，它的父窗口作用了margin这应该怎么办？
答：加上 overflow:hidden; 这句话即可。
