• less常用样式集,清除浮动、背景自适应、背景渐变、圆角、内外阴影、高度宽度计算。


    .clear-float() {
      content: '';
      display: block;
      clear: both;
      height: 0;
    }
    //伪元素清除浮动
    .after-clear() {
      &:after {
        .clear-float();
      }
    }
    //背景填充
    .background-size(@size:100%) {
      -moz-background-size: @size @size;
      -webkit-background-size: @size @size;
      -o-background-size: @size @size;
      background-size: @size @size;
    }
    
    //内阴影
    .shadow-inset(@h:0,@v:1px,@spread:0,@blur:0,@color:#ffffff) {
      -moz-box-shadow: @h @v @spread @blur @color inset;
      -webkit-box-shadow: @h @v @spread @blur @color inset;
      box-shadow: @h @v @spread @blur @color inset;
    }
    
    //外阴影
    .shadow-out(@h:0,@v:1px,@spread:0,@blur:0,@color:#ffffff) {
      -moz-box-shadow: @h @v @spread @blur @color;
      -webkit-box-shadow: @h @v @spread @blur @color;
      box-shadow: @h @v @spread @blur @color;
    }
    
    //圆角
    .radius (@radius: 5px) {
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      -ms-border-radius: @radius;
      -o-border-radius: @radius;
      border-radius: @radius;
    }
    
    //上半部分圆角
    .radius-top(@radius:5px) {
      -webkit-border-top-left-radius: @radius;
      -webkit-border-top-right-radius: @radius;
      -moz-border-radius-topleft: @radius;
      -moz-border-radius-topright: @radius;
      border-top-right-radius: @radius;
      border-top-left-radius: @radius;
    }
    
    //下半部分圆角
    .radius-bottom(@radius:5px) {
      -webkit-border-bottom-left-radius: @radius;
      -webkit-border-bottom-right-radius: @radius;
      -moz-border-radius-bottomleft: @radius;
      -moz-border-radius-bottomright: @radius;
      border-bottom-right-radius: @radius;
      border-bottom-left-radius: @radius;
    }
    
    //上下背景渐变
    .gradient(@startColor:#F2F2F2,@endColor:#D4D4D4) {
      background: -webkit-gradient(linear, left top, left bottom, color-start(0.05, @startColor), color-stop(1, @endColor));
      background: -moz-linear-gradient(top, @startColor 5%, @endColor 100%);
      background: -o-linear-gradient(top, @startColor 5%, @endColor 100%);
      background: -ms-linear-gradient(top, @startColor 5%, @endColor 100%);
      background: linear-gradient(to bottom, @startColor 5%, @endColor 100%);
      background: -webkit-linear-gradient(top, @startColor 5%, @endColor 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);
    }
    //宽度计算
    .calc-width(@allWidth:100%,@width) {
      width: -moz-calc(~"@{allWidth} - @{width}");
       -webkit-calc(~"@{allWidth} - @{width}");
       calc(~"@{allWidth} - @{width}");
    }
    //高度计算
    .calc-height(@allHeight,@height) {
      height: -moz-calc(~"@{allHeight} - @{height}");
      height: -webkit-calc(~"@{allHeight} - @{height}");
      height: calc(~"@{allHeight} - @{height}");
    }
    
    //转换定位
    .translate(@xaxis:0%;@yaxis:0%) {
      -webkit-transform: translate(@xaxis, @yaxis);
      -moz-transform: translate(@xaxis, @yaxis);
      -ms-transform: translate(@xaxis, @yaxis);
      -o-transform: translate(@xaxis, @yaxis);
      transform: translate(@xaxis, @yaxis);
    }
  • 相关阅读:
    css的一些属性及其属性值
    HTML基本标签
    JQuery
    js中的Dom事件模型以及表格方面等内容
    Alpha的过程总结
    数独+GUI界面
    数独
    调研《构建之法》指导下的全国高校的历届软工实践作品、全国互联网+竞赛、物联网竞赛、华为杯研究生作品赛、全国大学生服务外包赛等各类全国性大学生信息化相关的竞赛平台的历届作品
    本学期高级软件工程课程的实践项目的自我目标
    高级软件工程第八次作业:“两只小熊队”团队作业-5
  • 原文地址:https://www.cnblogs.com/v-weiwang/p/6895065.html
Copyright © 2020-2023  润新知