zoukankan      html  css  js  c++  java
  • 大家一起学习less 6:一些有用的混合函数

    水平渐变

    默认是浅色。

    .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
      background: @color;
      background: -webkit-gradient(linear,
                                   left bottom,
                                   left top,
                                   color-stop(0, @start),
                                   color-stop(1, @stop));
      background: -ms-linear-gradient(bottom,
                                      @start,
                                      @stop);
      background: -moz-linear-gradient(center bottom,
                                       @start 0%,
                                       @stop 100%);
    }
    

    使用示例

    .wh{
         500px;
         height:50px
    }
    .wh{
       .gradient //混合到.wh类里面
    }
    /*最后生成*/
    .wh {
    background: #f5f5f5;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(1, #ffffff));
    background: -ms-linear-gradient(bottom, #eeeeee, #ffffff);
    background: -moz-linear-gradient(center bottom, #eeeeee 0%, #ffffff 100%);
    } 
    

    水平渐变2

    默认是深色,并且后两个参数要求是0~256的数值

    .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
      background: @color;
      background: -webkit-gradient(linear,
                                   left bottom,
                                   left top,
                                   color-stop(0, rgb(@start,@start,@start)),
                                   color-stop(1, rgb(@stop,@stop,@stop)));
      background: -ms-linear-gradient(bottom,
                                      rgb(@start,@start,@start) 0%,
                                      rgb(@start,@start,@start) 100%);
      background: -moz-linear-gradient(center bottom,
                                       rgb(@start,@start,@start) 0%,
                                       rgb(@stop,@stop,@stop) 100%);
    }
    

    使用示例

    .wh{
      .bw-gradient(#ff0000, 55, 144)
    }
    

    边框颜色

    
    .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
      border-top: solid 1px @top-color;
      border-left: solid 1px @left-color;
      border-right: solid 1px @right-color;
      border-bottom: solid 1px @bottom-color;
    }
    

    下拉阴影(drop-shadow)

    .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
      -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
      -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
      box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
    }
    

    圆角

    只有一个参数

    .rounded(@radius: 2px) {
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      border-radius: @radius;
      -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
    }
    

    圆角

    有四个参数

    .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
      -webkit-border-top-right-radius: @topright;
      -webkit-border-bottom-right-radius: @bottomright;
      -webkit-border-bottom-left-radius: @bottomleft;
      -webkit-border-top-left-radius: @topleft;
      -moz-border-radius-topright: @topright;
      -moz-border-radius-bottomright: @bottomright;
      -moz-border-radius-bottomleft: @bottomleft;
      -moz-border-radius-topleft: @topleft;
      border-top-right-radius: @topright;
      border-bottom-right-radius: @bottomright;
      border-bottom-left-radius: @bottomleft;
      border-top-left-radius: @topleft;
      -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
    }
    

    透明度

    对IE支持不好

    .opacity(@opacity: 0.5) {
      -moz-opacity: @opacity;
      -khtml-opacity: @opacity;
      -webkit-opacity: @opacity;
      opacity: @opacity;
    }
    

    缓动时长

    .transition-duration(@duration: 0.2s) {
      -moz-transition-duration: @duration;
      -webkit-transition-duration: @duration;
      transition-duration: @duration;
    }
    

    .columns(@col 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
      -moz-column- @colwidth;
      -moz-column-count: @colcount;
      -moz-column-gap: @colgap;
      -moz-column-rule-color: @columnRuleColor;
      -moz-column-rule-style: @columnRuleStyle;
      -moz-column-rule- @columnRuleWidth;
      -webkit-column- @colwidth;
      -webkit-column-count: @colcount;
      -webkit-column-gap: @colgap;
      -webkit-column-rule-color: @columnRuleColor;
      -webkit-column-rule-style: @columnRuleStyle;
      -webkit-column-rule- @columnRuleWidth;
      column- @colwidth;
      column-count: @colcount;
      column-gap: @colgap;
      column-rule-color: @columnRuleColor;
      column-rule-style: @columnRuleStyle;
      column-rule- @columnRuleWidth;
    }
    
    https://github.com/dmitryf/elements/blob/master/elements.less
  • 相关阅读:
    FZU 2098 刻苦的小芳(卡特兰数,动态规划)
    卡特兰数总结
    FZU 1064 教授的测试(卡特兰数,递归)
    HDU 4745 Two Rabbits(区间DP,最长非连续回文子串)
    Java 第十一届 蓝桥杯 省模拟赛 正整数的摆动序列
    Java 第十一届 蓝桥杯 省模拟赛 反倍数
    Java 第十一届 蓝桥杯 省模拟赛 反倍数
    Java 第十一届 蓝桥杯 省模拟赛 反倍数
    Java 第十一届 蓝桥杯 省模拟赛 凯撒密码加密
    Java 第十一届 蓝桥杯 省模拟赛 凯撒密码加密
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2684817.html
Copyright © 2011-2022 走看看