css3

一、边框

border-radius:25px;
box-shadow: h-shadow v-shadow blur spread color inset;
详见：http://www.w3school.com.cn/cssref/pr_box-shadow.asp
box-shadow: 10px 10px 5px #888888; /*阴影：就是在元素背后再放一块div,背景为#888888,向右偏离10px,向下偏离10px,并把阴影的边框模糊5px*/

border-image:没搞明白。

二、背景
background-size:63px 100px; /*在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸*/

background-size:40% 100%;/*对背景图片进行拉伸，使其完成填充内容区域*/

background-origin:content-box;/*定位区域*/

background-image:url(bg_flower.gif),url(bg_flower_2.gif);/*多个背景图像*/

三、文字效果
text-shadow: 5px 5px 5px #FF0000;/*阴影：就是在元素背后再放相同的文字,字体颜色为#FF0000,向右偏离5px,向下偏离5px,并模糊5px*/
text-shadow 可以设置多个影阴,例如下面这个示例设置了两个阴影：
text-shadow: -1px 0 1px #684da3, 1px 0 1px rgba(0,0,0,0.8);

word-wrap:break-word;/*自动换行*/

四、字体
@font-face : 阿里巴巴和bootstrap提供的iconfont就是用@font-face实现的。
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

五、2D转换：移动、缩放、转动、拉长或拉伸.
注：2D转换是整个坐标系在转换，物体在坐标系中坐标并没有变化。
位移：
transform:translate(100px,200px);//向右移动100px,向下移动200px.
附：translateX(n)，translateY(n)
转动：
transform: rotate(30deg);//0到360deg, 顺时针转动逐渐增加.
transform-origin:0 50%;//转动的中心点位置.0 50%就是转动目标的最左侧上下居中那个位置.比如时钟表针的转动就设置为0 50%.默认值50% 50%就是以转动目标的正中心为圆点来转动。
缩放：
transform:scale(2,4);//宽度放大2倍，高度放大4倍。
附：scaleX(n)，scaleY(n)
倾斜：
transform: skew(30deg,20deg);
/*30deg:拉着左上角往左扯,提着右下角往右扯,使左上角和右下角变为(90-30)deg,
20deg:拉着左上角往上扯,提着右下角往下扯,使左上角和右下角变为(90-20)deg,
*/
这样理解：例如对一个矩形进行skew(),第一个参数的作用就是将上下两条边进行左右错位，第二个参数的作用就是将左右两条边上下错位。
                skew(30deg,20deg)：左右两条边均逆时针转30度（就像车子的两根雨刮那样转），上下两条边顺时针转20度。
附：skewX(angle)，skewY(angle)
矩阵变换：可以实现位移、转动、缩放、倾斜。
matrix() ： 比较复杂。
可以同时应用多个变换，用空格分隔，例如：
transform:translateX(100px) rotate(30deg);

六、3D转换 (在三维空间中旋转，而不是在平面上旋转)
注：3D转换是整个坐标系在转换，物体在坐标系中坐标并没有变化。
3D坐标系：由左到右为递增(x轴)、由上到下递增(y轴)、由屏幕后方到屏幕前方递增(z轴)。
旋转方向：1)围绕x轴旋转：上变远下变近角度递增.2)围绕y轴旋转：右变远左变近角度递增.3）围绕z轴旋转：相当于2D平面旋转，顺时针为正，逆时针为负。
transform: rotateX(120deg);/*围绕x轴旋转*/
transform: rotateY(130deg);/*围绕y轴旋转*/
平移：translate3d(x,y,z)、translateX(x)、translateY(y)、translateZ(z)。
      近大远小原理：transform:translateZ(400px):变大，transform:translateZ(-400px):变小.
      注：需要设置透视perspective(n)才会有近大远小效果。
缩放：scale3d(x,y,z)、scaleX(x)、scaleY(y)、scaleZ(z)。
旋转：rotate3d(x,y,z,angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)。
          rotate3d(x,y,z,angle)：x、y、z：0或1，表示是否围绕相应轴旋转.
          rotateX(angle)相当于 rotate(1,0,0,angle)
          rotateY(angle)相当于 rotate(0,1,0,angle)
          rotateZ(angle)相当于 rotate(0,0,1,angle)

透视：perspective(n)。
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

例如：一个矩形围绕Y轴旋转，实际上是两边同时向中间靠，矩形逐变窄，有一种视觉错觉，像是左转又像是右转，(围绕x轴旋转矩形变矮)
     设置透视后是这样旋转的：矩形在变窄的同时，一边在变高（变近），一边在变矮（变远），这样旋转方向
     起来就很明确，这样就不会有错觉。
perspective有两种写法：
a)作为一个属性,设置给父元素，作用于所有3D转换的子元素。
b)作为transform属性的一个值，作用于元素自身。例如：transform:perspective(1000px) rotateY(80deg);
理解透视距离：
   例如：
   .test:hover{
      transform:perspective(1000px) translateZ(100px);
   }
   当鼠标移到.test元素上时，translateZ不变，perspective的值越小，.test越大，perspective的值不变，translateZ越大,.test越大,
   原因是这样的：试想一个圆盘档住一个点光源在地面上形成一个圆形的影子，圆盘与地面距离就是translateZ的值,点光源与地面的距离
                 就是perspective的值。因此放大倍数为：perspective/(perspective-translateZ).

perspective设置的是人眼的视距，一个盒子放在那里不动，人眼从不同的位置看到的形状显示不一样。
perspective不常用。
transform-style:preserve-3d;--常用这个。
perspective-origin：设置 3D 元素的基点位置。
-----------------------
transform-origin:设置旋转元素的基点位置,默认值：50% 50% 0。
x轴可能的值：left,center,right,length,%
y轴可能的值：top,center,bottom,length,%
z轴可能的值：length.
-----------------------                 

transition-delay:3s;/*延时3s开始变换*/

backface-visibility:hidden;/*背面是否可见，设置为hidden,旋转180度就不可见了*/

实现3D立方体：
  1、实现知识点：
transform:perspective(1000px) rotateY(90deg);/*在屏屏幕上消失了，看不见了*/
transform:perspective(1000px) rotateY(90deg) translateX(200px);/*可以看得见，因为水平移动一定距离后，与视线有一定角度，所以可以看见。 并且也要设置perspective才看得见。*/
================================================
  2、实现立方体： /demo/css3/cube_1
================================================
七、过渡：某个属性从一种状态变为另一种状态的过渡效果。
语法：transition 属性 过渡时间 过渡效果时间曲线 何时开始.
过渡时间:默认0
过渡效果时间曲线:就是缓动函数的函数名,默认"ease"
何时开始:默认0，即立即开始。
transition 后面可以定义多个过渡，用逗号分隔。
缓存函数有：linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n) ，见：http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp
transition: background-color .15s, color .15s;/*背景颜色变化用0.15秒的过渡时间,文字颜色变化用0.15秒的过渡时间*/
transition: width 2s;/*宽度改变用2秒的时间过渡*/
transition: all 3s;/*所有属性都有3s过滤时间,all是默认属性*/
all属性意味着2D转换、3D转换都会有过渡效果，例如：
.test{
  transition: all 3s;
}
.test:hover{
  transform:rotateX(180deg);
}
这样，鼠标移到.test上，就会围绕x轴旋转180度(3s内完成)。

八、动画（@keyframes）：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: myfirst 5s;
}
"from" 和 "to"，等同于 0% 和 100%。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
nimation: @keyframes动画名称 过渡时间 过渡效果时间曲线 何时开始 播放次数 下一周期是否逆向播放 正在运行或暂停 动画时间之外的状态
播放次数：n 播放n次,infinite 无限次播放.
一周期是否逆向播放:normal为默认值,正常播放.alternate轮流反向播放.
例如：
animation: myfirst 5s linear 2s infinite alternate;

九：多列
自动对一堆文本内容进行多列显示。
div
{
column-count:3;/*3列*/
column-gap:40px;/*列之间间隔40px*/
column-rule:4px solid #ff0000;/*间隔样式。宽度为4px的一根红色竖线*/
}
column-width:列的宽度.
columns:100px 3;/*规定设置 column-width 和 column-count 的简写属性*/

十、用户界面
div
{
resize:both;/*用户可以用鼠标拖动调整大小*/
overflow:auto;
}

十一、 渐变：
线性渐变：background: linear-gradient(direction, color-stop1, color-stop2, ...);
径向渐变：background: radial-gradient(center, shape size, start-color, ..., last-color);

附：css伪元素
.test:before{
}
.test::after{
}
附：
span:first-child{
}
span:last-child{
}
span:nth-child(n){ /*n从1开始，表示第n个span*/
}