css3

1 css3了解：

   CSS 用于控制网页的样式和布局

2 css3模块：

  选择器 盒模型 背景和边框 文字特效 2D/3D转换动画 多列布局用户界面

3 css3边框：

  创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

 边框属性： border-radius box-shadow border-image

   实例：

   div

   {

   border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:300px;
border-radius:25px;
    }

4 css3背景：

     #jack
   { 
   background-image: url(img_flwr.gif), url(paper.gif); 
   background-position: right bottom, left top; 
   background-repeat: no-repeat, repeat; 
   }

5 css3渐变：

    #jian

   {
height:200px;
    background: -webkit-linear-gradient(red, blue); 
    background: -o-linear-gradient(red, blue);
    background: -moz-linear-gradient(red, blue);
    background: linear-gradient(red, blue);

   }

6 css3文本效果：

 h1
 { 
    text-shadow: 5px 5px 5px #FF0000;
 }

 7 css3 2D转换：

  方法：translate() rotate() scale() skew() matrix()

  实例：

        div

        {
width:300px;
height:400px;
background-color: #F36;
transform:rotate(30deg);
-ms-transform:rotate(30deg);
-webkit-transform:rotate(30deg);

         }

 8 css3 3D转换

  方法：rotateX() rotateY()

  实例：

   div{
width:300px;
height:400px;
background-color: #F36;
transform:rotate(30deg);
-ms-transform:rotate(30deg);
-webkit-transform:rotate(30deg);

        }

   div#zhe

       {
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg);
}

 9 css3过渡：

  当鼠标光标移动到该元素时，它逐渐改变它原有样式

    div 

    {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
   }
   div:hover 

   {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg);
  }