.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. 解题:POI 2007 Driving Exam

    题面 有点意思的题 从一个位置$i$出发可以到达每一个位置即是从$1,n$出发可以到达$i$.然后有了一个做法:把图上下反转后建反图,这样就可以求从一个点$i$到达左右两侧的花费$dp[i][0/1] ...

  2. url参数中有+、空格、=、%、&、#等特殊符号的问题解决

    url出现了有+,空格,/,?,%,#,&,=等特殊符号的时候,可能在服务器端无法获得正确的参数值,如何是好?解决办法将这些字符转化成服务器可以识别的字符,对应关系如下:URL字符转义 用其它 ...

  3. C++调Python示例(转载)

    C++调Python,代码粘贴如下: #include <iostream> #include <Python.h> using namespace std; void Hel ...

  4. Linux可执行文件后缀问题

    一般来说,可执行文件没有扩展名. Linux不根据扩展名判断文件类型,而是根据文件的内容来判断.所以扩展名的作用是帮助人来识别文件,对于Linux系统本身来说没有什么用处. .sh结尾表示是shell ...

  5. HOJ 13102 Super Shuttle (圆的反演变换)

    HOJ 13102 Super Shuttle 链接:http://49.123.82.55/online/?action=problem&type=show&id=13102 题意: ...

  6. Java入门:绘制简单图形

    在上一节,我们学习了如何使用swing和awt工具创建一个空的窗口,本节学习如何绘制简单图形. 基本绘图介绍 Java中绘制基本图形,可以使用Java类库中的Graphics类,此类位于java.aw ...

  7. ubuntu thrift

    1.下载 http://www.apache.org/dyn/closer.cgi?path=/thrift/0.9.2/thrift-0.9.2.tar.gz 2.解压 tar -xvf thrif ...

  8. Python【面向对象编程】

    #1.python中,类名首字母都大写#2.在python3中,经典类和新式类没有任何区别#3.在python2中,经典类和新式类的区别主要体现在多继承上,经典类是深度优先,新式类是广度优先#4.在p ...

  9. Unity官方实例教程 Roll-a-Ball

    与unity的transform组件相处的挺久了,最近项目不太忙,决定好好打下unity的基础.那么从Roll-a-Ball这个简单游戏开始吧! 1.先创建一个球体游戏对象,改名为Player,tra ...

  10. 转:NSString / NSData / char* 类型之间的转换

    1. NSString转化为UNICODE String: (NSString*)fname = @“Test”; char fnameStr[10]; memcpy(fnameStr, [fname ...