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;" ...
随机推荐
- BZOJ 4321 queue2
4321: queue2 Description n 个沙茶,被编号 1~n.排完队之后,每个沙茶希望,自己的相邻的两人只要无一个人的编号和自己的编号相差为 1(+1 或-1)就行: 现在想知道,存在 ...
- bzoj 2055 80人环游世界
有源汇上下界最小费用可行流. 将每个国家拆点. 源点向一个新建节点连一条上界为总人数下界为0费用为0的边. 新建节点向每个国家的入点连一条上界为正无穷下界为0费用为0的边. 每个国家的入点向出点连一条 ...
- Matlab ------ 打开MATLAB,设置默认打开的文件夹
- Python【操作Redis数据库】
Redis非关系型数据库,数据存放在计算机内存中,无SQL语句.Redis中有多种数据类型,比较常用的数据类型是string类型和hash类型.平时我们使用RedisDesktopManager来对R ...
- C#实现执行数据库事务案例
我是实际项目来拆出来做的案例,场景是比如我们在做电商网站时,在创建订单时的一系列操作,通常在创建订单时我们需要数据表的操作有:订单的表头(主表).订单的详细.清空购物车.甚至是修改优惠劵的状态(在使用 ...
- GC的时机
说到JVM,GC(垃圾回收)是非常重要的机制. 那么首先的问题是: GC在什么时候会发生? GC的触发包括两种情况:1.程序调用System.gc()的时候.2.系统自身决定是否需要GC. 系统进行G ...
- python---Django中模型类中Meta元对象了解
Django中模型类中Meta元对象了解 1.使用python manage.py shell 进入编辑命令行模式,可以直接进入项目(为我们配置好了环境) python manage.py shell ...
- 移动端UI
mui:http://dev.dcloud.net.cn/mui/ saltUI:https://salt-ui.github.io
- 深入分析Parquet列式存储格式
Parquet是面向分析型业务的列式存储格式,由Twitter和Cloudera合作开发,2015年5月从Apache的孵化器里毕业成为Apache顶级项目,最新的版本是1.8.0. 列式存储 列式存 ...
- 是否使用TDD(测试驱动开发)进行UI开发
问题 StackOverflow上有一则是否使用TDD(测试驱动开发)进行UI开发 的提问. _JacobE_问: 对于是否使用TDD进行开发UI这件事,我想了很久,但难以决定.我想听听你们的意见. ...