CSS3学习笔记

一.选择符
二.属性
溢出隐藏：

        #div4 p{
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

文本阴影：

       text-shadow: 2px 1px rgba(255,255,255,1)

圆角效果：

    border-radius

边框阴影：

 box-shadow:2px 2px 5px 5px inset:内阴影

透明度：

div{filter:alpha(opacity=50);} /* for IE8 and earlier */
div{opacity:.5;} /* for IE9 and other browsers */
background:rgba(0,0,0,0.5);//背景透明不影响元素

RGBA(R,G,B,A)

    R：
    红色值。正整数 | 百分数
    G：
    绿色值。正整数 | 百分数
    B：
    蓝色值。正整数 | 百分数
    A：
    Alpha透明度。取值0 - 1之间。

背景原点：

background-origin:border-box
                  padding-box
                  content-box

背景裁切：

background-clip：border-box
                 padding-box
                 content-box

背景大小：

background-size: cover,contain

多背景：

background-image: url(skin/p_103x196_1.jpg),
          url(skin/p_103x196_2.jpg),
          url(skin/p_103x196_3.jpg);

W3C盒模型 IE盒模型

伸缩盒：

      ul{
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -webkit-box-pack:start,center,end,justify;
            }
        ul li:nth-child(1){
            -webkit-box-flex: 1;/*设置或检索伸缩盒对象的子元素如何分配其剩余空间。*/
        }
        ul li:nth-child(2){
            -webkit-box-flex: 2;
        }
        ul li:nth-child(3){
            -webkit-box-flex: 3;
        }
        ul li:nth-child(4){
            -webkit-box-flex: 4;
        }

css3变换：transform
浏览器原生，性能好

            旋转：
            -webkit-transform: rotate(45deg); /*兼容webkit浏览器,角度45*/
            -moz-transform:rotate(45deg);/*兼容火狐浏览器*/
            -ms-transform:rotate(45deg);/*兼容微软浏览器*/
            -o-transform:rotate(45deg);/*兼容欧鹏浏览器*/
            transform:rotate(45deg);/*最后写*/

            扭曲：    skew(x,y) skey(25deg,25deg) 

            缩放：    scale(x,y)       scale(1.5)

            位移：    translate(x,y)   translate(20px,50px)
                      translateX() translateY() 
            中心点：  transform-origin: top right bottom left

css3过渡：transition

      缩写方式 
             transition: all .5s ease-in .1s;
            拆分方式：
             transition-property:all;
             transition-duration: .5s;
             transition-timing-function: ease-in;
             transition-delay: .1s;

css3动画：animation
**<’ animation-name ‘>：
*检索或设置对象所应用的动画名称
<’ animation-duration ‘>：
检索或设置对象动画的持续时间
<’ animation-timing-function ‘>：
检索或设置对象动画的过渡类型
<’ animation-delay ‘>：
检索或设置对象动画延迟的时间
<’ animation-iteration-count ‘>：
检索或设置对象动画的循环次数
<’ animation-direction ‘>：
检索或设置对象动画在循环中是否反向运动
<’ animation-fill-mode ‘>：
检索或设置对象动画时间之外的状态
<’ animation-play-state ‘>：
检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式*

     -webkit-animation:lala 5s ease 0.1s;
            animation:lala 5s ease 0.1s;
            @keyframes lala {
               from{
                margin-left:100px;
                background: greenyellow;
               }
               to{
                margin-left: 20px;
                background: deeppink;
               }
            或者
               0%{
                margin-left:100px;
                background: greenyellow;
               }
               40%{
                margin-left: 150px;
                background: orange;
               }
               60%{
                margin-left: 75px;
                background: deepskyblue;
               }
               100%{
                margin-left: 20px;
                background: deeppink;
               }

            }

3D

     #divfather{
     -webkit-perspective:200px;
     }
     #divson{
     -webkit-transform:rotateX(45deg)
     }