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)     }