.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常用样式集,清除浮动、背景自适应、背景渐变、圆角、内外阴影、高度宽度计算。的更多相关文章

  1. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  2. 常用的CSS清除浮动的方法优缺点分析(个人学习笔记)

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="di ...

  3. CSS(五)- 背景与边框 - 边框圆角与阴影基础用法

    扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...

  4. CSS清除浮动技巧

    一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ...

  5. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  6. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  7. CSS清除浮动方法集合

    CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...

  8. 前端开发CSS清除浮动的方法有哪些?

    在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...

  9. CSS(一)解析浮动塌陷与清除浮动

    清除浮动方法 1.对父级设置适合CSS高度,父级元素撑开并且包含子元素. <p>固定高度</p> <div style="height: 50px;" ...

随机推荐

  1. 【树上莫队】【SP10707】 COT2 - Count on a tree II

    Description 给定一棵 \(n\) 个点的树,每个节点有一个权值,\(m\) 次询问,每次查询两点间路径上有多少不同的权值 Input 第一行是 \(n\) 和 \(m\) 第二行是 \(n ...

  2. YY淘宝商品数据库设计

    http://www.cnblogs.com/mmmjiang13/archive/2010/11/04/1868609.html 前言 这几个月都在做一个通过淘宝API线下管理淘宝店的系统,学习了很 ...

  3. python print end=' ' 不换行

    python3.x 实现print 不换行 python中print之后是默认换行的,是因为其默认属性 end 默认值为"\n"(\n为换行符). 做练习99乘法表时不想换行,改变 ...

  4. state.sls与state.highstate区别

    最近编写kubernetes的saltstack状态配置文件,在github上找到一个开源的salt文件,根据自己的需要,完成修改之后.执行部署测试 大致目录结构如下: |----k8s | |___ ...

  5. P3275 [SCOI2011]糖果 && 差分约束(二)

    学习完了差分约束是否有解, 现在我们学习求解最大解和最小解 首先我们回想一下是否有解的求解过程, 不难发现最后跑出来任意两点的最短路关系即为这两元素的最短路关系. 即: 最后的最短路蕴含了所有元素之间 ...

  6. java基础-System类常用方法介绍

    java基础-System类常用方法介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.System类概念 在API中system类介绍的比较简单,我们给出定义,system中 ...

  7. 《剑指offer》面试题32----从1到n整数中1出现的次数

    题目:输入一个整数n,求从1到n这n个整数的十进制表示中1出现的次数.例如输入12,从1到12这些整数中包含1的数字有1,10,11和12,1一共出现了5次. 解法一:不考虑时间效率的解法(略) ps ...

  8. python获取url响应

    前言 requests发请求时,接口的响应时间,也是我们需要关注的一个点,如果响应时间太长,也是不合理的.如果服务端没及时响应,也不能一直等着,可以设置一个timeout超时的时间 关于request ...

  9. elk定时清理日志

    #!/bin/bash shijian=`date +%Y.%m.%d -d "5 days ago"` #echo $shijian curl -XDELETE "10 ...

  10. [转载]Node入门 » 一本全面的Node.js教程

    http://www.nodebeginner.org/index-zh-cn.html 作者: Manuel Kiessling 翻译: goddyzhao & GrayZhang & ...