less常用样式集,清除浮动、背景自适应、背景渐变、圆角、内外阴影、高度宽度计算。
.clear-float() {
  content: '';
  display: block;
  clear: both;
  height:;
}
//伪元素清除浮动
.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);
}
less常用样式集,清除浮动、背景自适应、背景渐变、圆角、内外阴影、高度宽度计算。的更多相关文章
- 常用样式制作思路    自定义按钮~自适应布局~常见bug       seajs简记      初学者必知的HTML规范     不容忽略的——CSS规范
		常用样式制作思路 学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ... 
- 常用的CSS清除浮动的方法优缺点分析(个人学习笔记)
		一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="di ... 
- CSS(五)- 背景与边框 - 边框圆角与阴影基础用法
		扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ... 
- CSS清除浮动技巧
		一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ... 
- 【转】CSS清除浮动_清除float浮动
		CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ... 
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
		最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ... 
- CSS清除浮动方法集合
		CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ... 
- 前端开发CSS清除浮动的方法有哪些?
		在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ... 
- CSS(一)解析浮动塌陷与清除浮动
		清除浮动方法 1.对父级设置适合CSS高度,父级元素撑开并且包含子元素. <p>固定高度</p> <div style="height: 50px;" ... 
随机推荐
- 在mvc中 怎么给@Html.HiddenFor()赋值
			@Html.HiddenFor(model => model.CreatedBy, new { @value=currentInfo.UserID}) value始终是null@Html.Tex ... 
- Codeforces 804D  Expected diameter of a tree
			D. Expected diameter of a tree time limit per test 3 seconds memory limit per test 256 megabytes inp ... 
- 四、Linux学习之文件处理命令
			1.建立目录:mkdir 格式:mkdir –p [目录名] -p 递归创建目录 注意事项: 如果是创建单个目录直接mkdir [目录名就可以] 如果是创建一个目录下的目录也就是递归创建目录请 ... 
- Cloudstack 虚拟机实例(四)
			虚拟机实例 默认的模板并没有被下载 修改全局设置 secstorage.allowed.internal.sites 设置 ,二级存储ISO镜像和模板可以下载,IP网段 重启服务/etc/init. ... 
- python 中的 %s,%r,__str__,__repr__
			1.%s,%r的区别 在进行格式化输出时,%r 与 %s 的区别就好比 repr() 函数处理对象与 str() 函数处理对象的差别. %s ⇒ str(),比较智能: %r ⇒ repr(),处理较 ... 
- 关于connect by 误区讲解,纯属个人心得和经验,有图有文字
			本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处. http://www.cnblogs.com/king-xg/p/6927541.html 如果觉得对您有帮 ... 
- openstack中的server
			一.HTTP server 主要是horizon模块,horizon是基于Python Django搭建的web应用,其运行于Apache网络服务器上(当然也可以运行在其他web服务器上),主要功能就 ... 
- iview组件 eslint校验出错  Parsing error: x-invalid-end-tag
			如下: 解决: 在.eslintrc.js文件中加上: rules: { // allow async-await 'generator-star-spacing': 'off', // allow ... 
- HDU 3802 矩阵快速幂 化简递推式子 加一点点二次剩余知识
			求$G(a,b,n,p) = (a^{\frac {p-1}{2}}+1)(b^{\frac{p-1}{2}}+1)[(\sqrt{a} + \sqrt{b})^{2F_n} + (\sqrt{a} ... 
- nodejs压缩
			在express中要用到压缩,把某一个文件夹压缩成zip,再返回到客户端提供下载. 用archiver库 var Archiver = require('archiver') router.get(' ... 
