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(' ...