css3 学习小结

                                    **css3 学习小结**

1.CSS3 边框
    border-radius
        border-radius:5px;-webkit-border-radius:5px;
    box-shadow
        box-shadow:3px 3px 3px #ccc;
    border-image
        其中有两个参数  一个是round案例如下：
        border-image:url(../images/1.png) 30 30 round;
        -moz-border-image:url(../images/1.png) 30 30 round; /* 老的 Firefox */
        -webkit-border-image:url(../images/1.png) 30 30 round; /* Safari 和 Chrome */
        -o-border-image:url(../images/1.png) 30 30 round;/* Opera */

        其中有两个参数  另一个是stretch案例如下(格式如上)：
        border-image:url(../image/1.png) 30 30 stretch;
2.CSS3 背景
    background-size
        background-size:100% 100%;     //格式一
        background-size:45px 45px;     //格式二
        background:url(../image/1.png) no-repeat;
    background-origin(规定背景图片的定位区域)
        有三个值：content-box;padding-box;border-box;
        background-origin:翻译出 来就是背景图片的起源：从内容部分起源；从内边距起源；从边框起源
    background-image:url(bg_flower.gif),url(bg_flower_2.gif);  //可以个多张图片

3.CSS3 文本效果
    text-shadow: 5px 5px 5px #FF0000; //CSS3 文本阴影
    word-wrap:break-word              //CSS3 自动换行
    text-align:justify;               //其他浏览器两端对齐
    text-justify:inter-word;          //只在ie情况下两端对齐
    text-overflow:ellipsis;           //马上溢出是用...省略文本  要结合：white-space:nowrap; width:12em; overflow:hidden; 
    word-break: break-all;            //通过使用 word-break 属性，可以让浏览器实现在任意位置的换行
    word-wrap:break-word;             //word-wrap 属性允许长单词或 URL 地址换行到下一行。

4.CSS3 字体
    <style> 
    @font-face{
        font-family: myFirstFont;
        src: url('Sansation_Light.ttf'),
        url('Sansation_Light.eot'); /* IE9+ */
    }
    div{font-family:myFirstFont;}
    </style>

5.CSS3 2D 转换
    translate()         //值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
        transform:translate(50px,100px);
        -ms-transform:translate(360deg);    /* IE 9 */
        -webkit-transform:translate(360deg);/* Safari and Chrome */
        -o-transform: translate(30deg);     /* Opera */
        -moz-transform: translate(30deg);   
    rotate()            //值 rotate(30deg) 把元素顺时针旋转 30 度。
        transform: rotate(30deg);
        -ms-transform:rotate(360deg);   /* IE 9 */
        -webkit-transform:rotate(360deg);/* Safari and Chrome */
        -o-transform: rotate(30deg);        /* Opera */
        -moz-transform: rotate(30deg);  
    scale()             //值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
        transform:scale(2,4);
        -ms-transform:scale(2,4);
        -webkit-transform:scale(2,4);
        -o-transform:scale(2,4);
        -moz-transform:scale(2,4);
    skew()              //值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
        transform: skew(30deg,20deg);
        -ms-transform: skew(30deg,20deg);   /* IE 9 */
        -webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */
        -o-transform: skew(30deg,20deg);    /* Opera */
        -moz-transform: skew(30deg,20deg);  /* Firefox */
    matrix()
        transform:matrix(0.866,0.5,-0.5,0.866,0,0);
        -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);     /* IE 9 */
        -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
        -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
        -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);  

5.CSS3 3D 转换
    rotateX()
        transform: rotateX(120deg);
        -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
        -moz-transform: rotateX(120deg);    /* Firefox */
    rotateY()
        transform: rotateY(130deg);
        -webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
        -moz-transform: rotateY(130deg);    /* Firefox */

6.CSS3 过渡
    transition: width 2s, height 2s, transform 2s;
    -moz-transition: width 2s, height 2s, -moz-transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    -o-transition: width 2s, height 2s,-o-transform 2s;

    div
    {
        transition-property: width;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 2s;

        简写成：transition: width 1s linear 2s;
        /* Firefox 4 */
        -moz-transition-property:width;
        -moz-transition-duration:1s;
        -moz-transition-timing-function:linear;
        -moz-transition-delay:2s;
        /* Safari 和 Chrome */
        -webkit-transition-property:width;
        -webkit-transition-duration:1s;
        -webkit-transition-timing-function:linear;
        -webkit-transition-delay:2s;
        /* Opera */
        -o-transition-property:width;
        -o-transition-duration:1s;
        -o-transition-timing-function:linear;
        -o-transition-delay:2s;
    }

7.CSS3 动画
    @keyframes myfirst{
        form{background:red;}
        to{background:yellow;}
    }
    @keyframes mysec{
        0%  {background:red;}
        25% {background:yellow;}
        50% {background:pink;}
        100% {background:black;}
    }
    .main{animation:myfirst 1s;}

    {animation: myfirst 5s linear 2s infinite alternate;}

7.CSS3  多列
    column-count
        -moz-column-count:3;    /* Firefox */
        -webkit-column-count:3; /* Safari 和 Chrome */
        column-count:3;
    column-gap
        -moz-column-gap:40px;       /* Firefox */
        -webkit-column-gap:40px;    /* Safari 和 Chrome */
        column-gap:40px;
    column-rule
        -moz-column-rule:3px outset #ff0000;    /* Firefox */
        -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
        column-rule:3px outset #ff0000;

8.CSS3 用户界面
    resize
        resize:both;
        overflow:auto;
    box-sizing
        border:1px solid #ccc
        width:50%;
        float:left;
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box;  /* Safari */
    outline-offset
            border: 2px solid black;
            outline: 2px solid red;
            outline-offset: 15px;