css3基础

   周六周日在宿舍闲来无事，这段时间一直在忙着专业其他方面的书籍的学习，一段时间没接触到前端这块了，索性就打算花这两天好好回顾一下前端的一些知识。

一下是css3的一些属性，规则，貌似看着混乱不堪，但css3的一些基本知识都在里面，由于这些只为自己以后复习所用，所以就做的稍微粗糙了点，之后我还会给自己把之前的css学到东西也整理一下，供自己以后工作好好参考：

/*border属性*/
div{
    border:2px;
    border-radius:25px;/*用于创建圆角*/
    box-shadow: 10px 10px 5px #888888;/*添加阴影*/}

#round{border-image: url(border.png) 30 30 round;
       -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
       -o-border-image:url(border.png) 30 30 round;/* Opera */
}
#stretch{
     border-image:url(border.png) 30 30 stretch;
     -webkit-border-image:url(borde.png) 30 30 stretch;
     -o-border-image:;

}

/*背景*/
div{
    background-image: url(img.png);
    background-size: 80px 60px;/*指定背景图像的大小*/
    background-repeat: no-repeat;
}
div{
    background-image: url(img.png);
    background-size: 100% 100%;/*指定背景图片的填充范围*/
    background-repeat: no-repeat;
    background-origin: content-box;/*指定背景图片的位置区域参数有border-box.padding-box.content-box*/

}
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);/*允许加入多个图形*/
} 


/*gradients渐变 -在两个或多个指定的颜色之间显示平稳的过渡*/

/*语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);*/

#grad{/*上到下的线性渐变*/ /*IE9及之前的版本不支持这个属性*/
    background: -webkit-linear-gradient(red,blue);/*safari5.1-6.0*/
    background: -moz-linear-gradient(red,blue);
    background: -o-linear-gradient(red,blue);
    background: linear-gradient(red,blue);/*标准语法*/

}
#grad{/*左到右的线性渐变*/
    background: -webkit-linear-gradient(left,red,blue);/*safari5.1-6.0*/
    background: -moz-linear-gradient(left,red,blue);
    background: -o-linear-gradient(left,red,blue);
    background: linear-gradient(left,red,blue);
}
#grad{/*上左对角线渐变下左*/
    background: -webkit-linear-gradient(top left,red,blue);/*safari5.1-6.0 默认表示左下角*/
    background: -o-linear-gradient:(bottom right,red,blue);
    background: -moz-linear-gradient(bottom right,red,blue);
    background: linear-gradient(to bottom right,red,blue);/*标准语法，必须放在最后*/
}

/*角度渐变*/
/*语法：background: linear-gradient(angle, color-stop1, color-stop2); */
#grad{
    background: -webkit-linear-gradient(90deg,red,blue);
    background: -o-linear-gradient:(90deg,red,blue);
    background: -moz-linear-gradient(90deg,red,blue);
    background: linear-gradient:(90deg,red,blue);/*默认语法，必须放在最后*/
}
/*带彩虹的线性渐变*/
#grad{
    background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);/*safari5.1-6.0*/
    background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
    background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
    background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);/*标准的语法，必须放在最后*/ 
}

/*使用透明度Transparency
添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
*/
#grad{/*从左到右的线性渐变，带有透明度*/
   background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
   background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
   background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
   background: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1))/*标准的语法，必须放在最后*/
}

/*重复的线性渐变*/
#grad{
    background:-webkit-repeating-linear-gradient(red,yellow 5%,blue 5%);
    background: -o-repeating-linear-gradient(red,yellow 5%,blue 5%);
    background: -moz-repeating-linear-gradient(red,yellow 5%,blue 5%);
    background: repeating-linear-gradient(red,yellow 5%,blue 5%);
}

/*径向的线性渐变
语法：background: radial-gradient(center, shape size, start-color, ..., last-color);
默认情况下，渐变的中心是 center（表示在中心点），
渐变的形状是 ellipse（表示椭圆形），
渐变的大小是 farthest-corner（表示到最远的角落）。
*/
#grad{
    background: -webkit-radial-gradient(red,green,blue);
    background: -o-radial-gradient(red,green,blue);
    background: -moz-radial-gradient(red,green,blue);
    background: radial-gradient(red,green,blue);
}
/*径向渐变*/
#grad{
    background: -webkit-radial-gradient(red 5%,green 10%,blue 40%);
    background: -o-radial-gradient(red 5%,green 10%,blue 40%);
    background: -moz-radial-gradient(red 5%,green 10%,blue 40%);
    background: radial-gradient(red 5%,green 10%,blue 40%);
}
/*设置形状
形状有circle(圆形) 或 ellipse(椭圆)*/
#grad{
    height: 150px;
    width:200px;
    background:-webkit-radial-gradient:(circle,red,yellow,green);/*safari5.1-6.0*/
    background: -o-radial-gradient(circle,red,yellow,green);
    background: -moz-radial-gradient(circle,red,yellow,green);
    background: radial-gradient(circle,red,yellow,green);/*标准语法，必须放在最后*/
}





      /*文本效果*/
/*文本阴影与换行
text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色.
word-wrap：break-word*/
p{
    text-shadow:5px 5px 5px #fff;
    word-wrap:break-word;/*允许长文本换行*/
}

/*css3字体
*@font-face规则
*Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.
 Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。
 Internet Explorer 9 只支持 .eot 字体.
*
*/
<style>
@font-face
{
    font-family: myfonts;
    src:url('Sansation_Light.ttf'),
        url('Sansation_Light.eot');/*for IE 9 定义字体文件的 URL*/
        font-weight: bold;
        /*必须添加另一个包含粗体文字的@font-face规则
          浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体
        */
        font-stretch:condensed;/*定义如何拉伸字体*/
}
div{
    font-style: myfonts;
}
</style>


/*2D转换*/
/*2D变换方法：
    translate()
    rotate()
    scale()
    skew()
    matrix()
*/

div{
    transform:rotate(30deg);/*旋转30度*/
    -ms-transform:rotate(30deg);/*IE 9*/
    -webkit-transform:rotate(30deg);
}

/*translate方法*/
div{
    transform:translate(50px,100px);/*从起始位置（o o）移动到位置（50px，100px）*/
    -ms-transform:translate(50px,100px);
    -webkit-transform:translate(50px,100px);
}

/*scale方法--scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数*/
div{
    transform:scale(2,4);/*表示宽度变为原来的两倍，长度变为原来的四倍*/
    -ms-transform:scale(2,4);
    -webkit-transform:scale(2,4);
}

/*skew方法
根据横向（X轴）和垂直（Y轴）线参数给定角度
*/

div{
    transform:skew(30deg,20deg);/*绕X轴和Y轴周围20度30度的元素。*/
    -ms-transform:skew(30deg,20deg);
    -webkit-transform:skew(30deg,20deg);
}

/*matrix()方法
六个参数，包含旋转，缩放，移动（平移）和倾斜功能
*/
div{
    transform:matrix(0.886,0.5,-0.5,0.886,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -webkit-transform:matrix((0.866,0.5,-0.5,0.866,0,0));
}

/*3D转换*/
/*rotateX()方法
围绕其在一个给定度数X轴旋转的元素
*/
div{
    transform:rotateX(120deg);
    -webkit-transform:rotateX(120deg);/*safari and chrome*/
}
/*rotateY()方法
围绕其在一个给定度数Y轴旋转的元素
*/
div{
   transform:rotateY(120deg);
   -webkit-transform:rotateY(120deg);
}

/*css3过渡*/
div{
    height: 100px;
    width:200px;
    background:blue;
    transition:width 2s;/*用于宽度属性的过渡效果，时长为 2 秒*/
    -webkit-transition:width 2s;
}
div:hover{
    width: 400px;
}
/*多项转变*/
div{
    height:100px;
    width:200px;
    background:blue;
    -webkit-transition:width 2s,height 2s,-webkit-transform 2s;/*for safari 3.1-6.0 and chrome */
    transiton:width 2s,height 2s,transform 2s;
}
div:hover{
    width:200px;
    height: 400px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
/*所有过度属性*/
div{
    width:100px;
    height:100px;
    background:blue;
    transition-property:width;/*规定应用过度的css属性的名称*/
    transition-duration:2s;/*定义过渡效果花费的时间，默认是0*/

    transition-timing-function:linear;/*规定过渡效果的事件曲线，默认是ease*/
    transition-delay:2s;/*规定过渡效果开始的时间。默认是0*/
    /*safari*/
    /*简写方式：
    transitiion:width 2s linear 2s;
    -webkit-transiton:width 2s linear 2s;
   */
    -webkit-transiton-property:width;
    -webkit-transiton-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}


/*动画效果*/
/*第一种*/
div{
    awidth:200px;
    height: 200px;
    background: red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s;
}
@keyframes myfirst{
    from{background:red;

    }to{
        background:blue;
    }
}

-webkit-@keyframe myfirst{/*for Safari and chrome*/
    from{
        background:red;
    }to{
        background:blue;
    }
}
/*第二种*/
div{
    width:200px;
    height: 200px;
    background: red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s;
}

@keyframe myfirst{
  0% {background:red;}
  25% {background: yellow;}
  50% {background: blue;}
  75%{background: green;}
}
-weblit-@keyframe myfirst{
    0% {background:red;}
    25% {background: yellow;}
    50% {background: blue;}
    75%{background: green;}
}

/*第三种*/
div{
    width:200px;
    height:300px;
    background: red;
    position: relative;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s;
}
@keyframe myfirst{
   0%{background:red;left:0px;top:0px;}
   25%{background:blue;left:100px;top:0px;}
   50%{background: green;left:100px;top:100px;}
   75%{background: yellow;left:0px;top:100px;}
   100%{background: red;left:0px;top:0px;}
}
-webkit-@keyframe myfirst{
    0%{background: red;left:0px;top:0px;}
    25%{background: blue;left:100px;top:0px;}
    50%{background: green;left:100px;top:100px;}
    75%{background:yellow;left:0px;top:100px;}
    100%{background:red;left:0px;top:0px;}
}
/*第四种*/
div{
    width:100px;
    height:100px;
    background:red;
    animation-name:myfirst;
    animation-timing-function:linear;
    animation-durarion:5s;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /*safari and chrome*/
    -webkit-animation-name:myfirst;/**/
    -webkit-animation-duration:5s;/*设置动画完成的时间*/

    -webkit-animation-timing-function:linear;/*指定动画以什么速度完成播放
    linear     动画从头到尾的速度是相同的。     
    ease     默认。动画以低速开始，然后加快，在结束前变慢。     
    ease-in     动画以低速开始。     
    ease-out     动画以低速结束。     
    ease-in-out     动画以低速开始和结束。     
    cubic-bezier(n,n,n,n)     在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。*/

    -webkit-animation-delay:2s;/*指定动画延迟几秒后开始*/

    -webkit-animation-iteration-count:infinite;/*定义动画应该播放多少次。
     n     一个数字，定义应该播放多少次动画 
     infinite     指定动画应该播放无限次（永远）*/

    -webkit-animation-direction:alternate;/*定义是否循环交替反向播放动画,
    normal默认值,.动画按正常播放。reverse动画反向播放。alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
    alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
    initial     设置该属性为它的默认值。     
    inherit     从父元素继承该属性。*/
    
    -webkit-animation-play-state:running;/*指定动画是否正在运行或已暂停,paused指定暂停动画,running指定正在运行的动画*/


    /*简写形式
    div
       {
         animation: myfirst 5s linear 2s infinite alternate;
         /* Safari and Chrome: */
        /*
        -webkit-animation: myfirst 5s linear 2s infinite alternate;
       } */
}
/*css3多列*/
div{
    /*column-rule: column-rule-width column-rule-style column-rule-color;*/
    -moz-column-rule:2px outset #fff;/*指定列之间的规则：宽度，样式和颜色*/
    -webkit-column-rule:2px outset #fff;
    column-rule:2px outset #fff;

    -moz-column-gap:20px;/*指定列之间差距*/
    -webkit-column-gap:20px;
    column-gap:20px;

    -moz-column-count:3;/*指定列的数量*/
    -webkit-column-count:3;
    column-count:3;
}

/*用户界面*/

div{
    border:1px solid #ccc;
    padding:10px 40px;
    width: 300px;
    resize:both;/*resize属性指定一个元素是否应该由用户去调整大小。*/
    overflow:auto;

}
/*调整方框大小box-sizing*/
div.container{
    width:30em;
    border:1em solid;

}
div.box{
    box-sizing:border-box;
    -moz-border-sizing:border-box;/*box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容*/
    width:50%;
    border:1em solid #ccc;
    float:left;

}
/*外形修饰outline-offset*/
div{
    width:200px;
    height:70px;
    margin:150px;
    padding:10px;
    border:1px solid #ccc;
    outline:2px solid red;
    outline-offset:15px;/*规定边框边缘之外 15 像素处的轮廓*/

}

 

}