CSS3技巧

一.清浮动

1.由于浮动后,容器无法自适应内容高度需要清浮动.
父级:
.clear:after{content='';display:block;clear=both;}
IE6以下不兼容,增加:
.clear{zoom=1;}

二.选择器,伪类

属性选择器:
[title]{}   /*拥有titile属性的元素*/
a[src^="https"] /*以https开头的每个元素*/
a[src$=".pdf"]  /*以.pdf结尾的每个元素*/
a[src*="abc"]   /*以包含abc的每个元素*/
结构化伪类(选择器):
li:nth-child(2n){}  /*IE6-8不支持些属性*/
:nth-of-type(n)     /*所有并列类型类型的第n个元素*/
目标伪类:
:target{}   /*选取当前活动的目标元素*/

三.字体

text-shadow:h-shadow v-shadow blur color;
text-shadow:0 0 5px $f00; /*偏移量为0,可以构建光晕效果*/
text-shadow:0 0 5px $f00; /*偏移量相同,可以构建浮雕效果*/
text-stroke:1px #000; /*描边字体,只有webkit浏览器支持*/
/*字体像报纸一样分栏*/
div{column-count:3;column-gap:30px;column:1px dashed black}     /*分栏数量 | 中间宽度 | 中间样式*/

四.背景

background-origin:border-box;   /*背景图片平铺位置:边框左上角(border-box) | 内边距左上角(padding-box) | 内容左上角(content-box)*/
background-clip:padding-box;    /*可在外边距内显示图片*/

五.动画

iHover-css动画库:http://gudh.github.io/ihover/dist/index.html
hover.css-鼠标效果库:http://ianlunn.github.io/Hover/ https://github.com/IanLunn/Hover
CSS3和JavaScript结合:http://visionmedia.github.io/move.js/
div{
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation:myfirst 5s infinite;
     }

      @keyframes myfirst{
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
      }

六.弹性盒子

/*中间定宽,两边自适应三栏布局 部分浏览器与,大部分手机浏览器支持*/
  .container{
    margin:auto;
    display: -webkit-box; /*父级必须声明*/
    width:80%;
    height:300px;
  }
  .left{-webkit-box-flex:3;} /*比例3*/
  .main{width:600px;}
  .right{-webkit-box-flex:4;}
/*盒子内容都是在父级设置*/
-webkit-box-orient:inline-axis;  /*横向*/
-webkit-box-orient:block-axis;      /*纵向*/
-webkit-box-align:start;        /*竖直方向:start顶部对齐 | end底部对齐 | center居中对齐 | baseline内起始文字底边线对齐*/
-webkit-box-pack:justify;       /*水平方向:start左浮 | end右浮 | center居中 | justify左右浮+中间自动间距*/
-webkit-box-deraction:reverse;      /*内容加载顺序*/

七.css兼容性处理

1.Prefix free
2.Normalize 重置浏览器默认样式,可复用.