标签: 渐变

  • CSS3 学习笔记

    CSS3 学习笔记

    选择器

    子节点(不包含孙节点)

    E > F {
      // styles
    }
    

    第n个子节点

    E > F:nth-child(2) {
      // 第二个F节点
    }
    E > F:nth-child(2n) {
      // 所有偶数节点
    }
    E > F:nth-child(2n + 1) {
      // 所有偶数节点后面那个节点
    }
    :nth-child(-n + 3) {
      // 前3个节点
    }
    

    紧邻的节点(从第二个往后开始生效)

    E + F
    

    多列文本

    .column3 {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
      -moz-column-gap: 15px;
      -webkit-column-gap:15px;
      column-gap: 15px;
    }
    

    还有一些column-xxx的方法,基本上可以望文生义。

    渐变

    线性渐变

    .selector{
      background:-moz-linear-gradient(left, white, black); //firefox
      background:-webkit-linear-gradient(left, white, black); //webkit
      background:linear-gradient(to right, white, black); // standard
    }
    

    放射渐变

    background:radial-gradient( [ <options> || <angle>,]? [ <shape> || <size>,]? <stop>, <stop>;[, <stop>]*)
    
    .selector{
      background:-moz-radial-gradient(10% 30%, white, black); //firefox
      background:-webkit-radial-gradient(10% 30%, white, black); //webkit
    }
    

    清除浮动

    .clr {
      zoom:1;
    }
    .clr:after {
      clear:both;
      visibility: hidden;
      display: block;
      height: 0;
      line-height: 0;
      content: "";
    }
    

    如果在chrome下,只要简单的:

    .clr {
      overflow:hidden;
    }