css3 属性选择器：
div[属性] div[class] 匹配具有某个属性的元素
div[属性=值] div[attr=val] 匹配的是具有attr属性的元素，并且属性值=val
div[属性^=val] 匹配属性值以val开头的元素
div[属性$=val] 匹配的是属性值以val结尾的所有元素
div[属性*=val] 匹配的是属性值包含val的所有元素

 div[class=box]{
     background:red;
 }

/* 匹配的是class属性值以b开头的所有div /
div[class^=box]{
color:green;
}
/ 匹配的是class属性值以s结尾的所有div */
div[class$=s]{
font-size:30px;
}

/* 匹配的是属性值包含o的所有元素 /
div[class=o]{
border:5px solid #000;
}

css3：
边框阴影：
属性：
box-shadow:
x-offset(在x轴的偏移量,必须) y-offset(在y轴的偏移量，必须);

       参数：
         x-offset(在x轴的偏移量,必须) 
         y-offset(在y轴的偏移量，必须) 
         color（颜色,可选）;
         inset(阴影投影方式，内阴影或 外阴影，可选)
         blur-radius  阴影的模糊半径 (可选)
         spread-radius   阴影的扩展半径(可选)



.box{
      width:200px;
      height:200px;
      border:1px solid #000;
     /**边框阴影*/
     box-shadow:inset 5px 5px 20px  red;
  }
.box1{
      width:200px;
      height:200px;
      border:1px solid #000;
     /**边框阴影*/
     box-shadow:inset 5px 5px 20px 10px red;
  }

渐变：
属性：background-image:

  线性渐变   径向渐变   重复渐变

  线性渐变:
      取值：
        background-image:linear-gradient(方向，color1,color2);
        方向：
            to top:向上
            to bottom 向下
            to left  向左
            to right 向右
  径向渐变:
      属性：background-image：
      取值：radial-gradient(size，color1,color2,.....)
      size:所在圆心的位置
  重复渐变:







 .box1{
 width:300px;
     height:300px;
     background-image:linear-gradient(to top,red,green);
 }
 .box2{
 width:300px;
     height:300px;
     border:1px solid #000;
     background-image:radial-gradient(100px 100px,red,green,yellow,pink);
 }










  css3:
     2010:
     主流浏览器：
         chrom   firefox  Safari  opera IE 

    box-shadow:

    
    浏览器内核”：负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页
    浏览器的内核：
        IE:      Trident    -ms-box-shadow:
        chrome   Webkite    -webkit-box-shadow:
        safari   Webkite    -webkit-box-shadow: 
        Opera    Blink      -o-box-shadow:
        firefox  Mozilia    -moz-box-shadow:


  .box{
      box-shadow: 5px 5px;
      -ms-box-shadow:5px 5px;
      -webkit-box-shadow:
      -o-box-shadow:
      -moz-box-shadow:
  }







  css3变形：
      是一些效果的集合
      如：平移  缩放 旋转  倾斜
      属性：transform:平移  缩放 旋转  倾斜
      
    1.平移 
        transform：
            translateX(50px)  只设置X轴的平移
            translateY(50px)  只设置Y轴的平移
            translate(5px,5px);

   2.缩放：
       transform：
            scaleX(1.2) 沿着X轴缩放
            scaleY(0.8) 沿着y轴缩放
            sacle(x,y)  沿着x y轴一起缩放

 3.旋转
       transform：
            rotate(30deg);

 4.倾斜：
     transform：
          skewX(30deg) -30deg
          skewY(30deg)  -30deg
          skew(30deg,30deg);


  .box{
     width:100px;
     height:50px;
     background:red;
  }
  .box:hover{
    /*  transform:translateX(5px);
     transform:translateY(5px);  
      transform:translate(5px,5px);*/

    /*缩放
    transform:scaleX(1.2);
    transform:scaleY(1.2);

    transform:scale(1.2,0.8);*/

    /**旋转*/
    /*transform:rotate(360deg);
    transform:rotate(-350deg);*/
    transform:skew(30deg,30deg);
  }