css3属性小结

/*border-radius*/
.demo2{
  border:2px solid #a1a1a1;
  padding:10px 40px;
  background:#dddddd;
  width:300px;
  border-radius:25px;
}
/*box-shadow*/
.demo3{
  width:300px;
  height:100px;
  background-color:yellow;
  box-shadow: 10px 10px 5px #888888;
}
/*border-image*/
.demo4{
  -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
  -o-border-image:url(border.png) 30 30 round; /* Opera */
  border-image:url(border.png) 30 30 round;
}
.demo5{
  -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
  -o-border-image:url(border.png) 30 30 stretch; /* Opera */
  border-image:url(border.png) 30 30 stretch;
}
/*background-size*/
.demo6{
  background:url(img_flwr.gif);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
/*background-Origin／background-clip  border-box padding-box content-box*/
.demo7{
  background:url(img_flwr.gif);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-origin:content-box;
}
/*多个背景*/
.demo8{
  background-image:url(img_flwr.gif),url(img_tree.gif);
}
/*gradient*/
 /*线性渐变 水平*/
.demo9{
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
  /*线性渐变 左到右*/
.demo10{
    height: 200px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
}
  /*线性渐变 左上到右下*/
.demo11{
    height: 200px;
    background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
}
  /*线性渐变 角度控制*/
.demo12{
    height: 100px;
    background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */
}
  /*线性渐变 多色均匀*/
.demo13{
    height: 200px;
    background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}
  /*线性渐变 多色不均匀*/
.demo14{
    height: 200px;
    background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
    background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
}
  /*线性渐变 透明度的使用*/
.demo15{
    height: 200px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */
}
  /*线性渐变 重复性渐变*/
.demo16{
    height: 200px;
    background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
    background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
    background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */
}
  /*圆径渐变 均匀*/
.demo17{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
  /*圆径渐变 不均匀*/
.demo18{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}
  /*圆径渐变 重复 不均匀*/
.demo19 {
    height: 150px;
    width: 200px;
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
    background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法（必须放在最后） */
}

/*文本阴影*/
.demo20{
  text-shadow: 5px 5px 5px #FF0000;
}
/*防止最后一个单词过长溢出div*/
p.demo21{
width:11em;
border:1px solid #000000;
word-wrap:break-word;
}
/*字体*/
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
.demo22{
font-family:myFirstFont;
}


/*2D转换 旋转*/
.demo23{
  transform:rotate(30deg);
  -ms-transform:rotate(30deg); /* IE 9 */
  -webkit-transform:rotate(30deg); /* Safari and Chrome */
}
/*2D转换 移动*/
.demo24{
  transform:translate(50px,100px);
  -ms-transform:translate(50px,100px); /* IE 9 */
  -webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
/*2D转换 放大*/
.demo25{
  margin:100px;
  transform:scale(2,4);
  -ms-transform:scale(2,4); /* IE 9 */
  -webkit-transform:scale(2,4); /* Safari and Chrome */
}
/*2D转换 x轴 y轴 变形*/
.demo26{
  transform:skew(30deg,20deg);
  -ms-transform:skew(30deg,20deg); /* IE 9 */
  -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
/*2D转换 变换的一个合成属性 旋转，缩放，移动（平移）和倾斜*/
.demo27{
  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 */
  -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

/*3D转换 旋转X*/
.demo28{
  transform:rotateX(120deg);
  -webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
/*3D转换 旋转Y*/
.demo29{
  transform: rotateY(130deg);
  -webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

/*过渡*/
.demo30
{
  width:100px;
  height:100px;
  background:red;
  transition:width 2s;
  -webkit-transition:width 2s; /* Safari */
}
.demo30:hover
{
  width:300px;
}
.demo31{
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

.demo31:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

/*动画*/
.demo32{
  width:100px;
  height:100px;
  background:red;
  animation:bgchange 5s linear 0s infinite alternate;
  -webkit-animation:bgchange 5s linear 0s infinite alternate; /* Safari and Chrome */
}
  @keyframes bgchange
  {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
  }

  @-webkit-keyframes bgchange /* Safari and Chrome */
  {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
  }


/*多列  如下div内的文件将变成3列显示*/
.demo33{
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;

  /*指定列之间的间距*/
  -moz-column-gap:40px; /* Firefox */
  -webkit-column-gap:40px; /* Safari and Chrome */
  column-gap:40px;

  /*制定列之间的间隔线*/
  -moz-column-rule:4px outset #ff00ff; /* Firefox */
  -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
  column-rule:4px outset #ff00ff;
}


/*指定div可以被用户调整大小*/
.demo34{
  resize:both;
  overflow:auto;
}

 

 

/*水平显示内层的div*/
    .boxcontainer { 
        width: 1000px; 
        display: -webkit-box; 
        display: -moz-box; 
        -webkit-box-orient: horizontal; 
        -moz-box-orient: horizontal; 
    }
    /*最后一个div宽度填满*/
    .flex { 
        -webkit-box-flex: 1; 
        -moz-box-flex: 1; 
    }
/*文本溢出显示省略号*/
    .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px;}
/*多列显示文字*/
    .multi_column_style{ 
     -webkit-column-count: 3; 
     -webkit-column-rule: 1px solid #bbb; 
     -webkit-column-gap: 2em; 
     } 

/*

点击该层div，使得点击事件无效

*/

.pointerEventNone{pointer-events:none}