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}");
  width: -webkit-calc(~"@{allWidth} - @{width}");
  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);
}

 

posted @ 2017-05-23 17:23  黑衣帽子  阅读(1441)  评论(0编辑  收藏  举报