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;" ...
随机推荐
- Android Studio 导入系统 jar包
1.当前需要导入系统jar包的module所对应build.gradle中添加如下依赖: provided files('libs/classes-full-debug.jar') 也可以图形化设置: ...
- 如何在 Android 程序中禁止屏幕旋转和重启Activity
禁止屏幕随手机旋转变化 有时候我们希望让一个程序的界面始终保持在一个方向,不随手机方向旋转而变化:在AndroidManifest.xml的每一个需要禁止转向的Activity配置中加入android ...
- GoLand语言快捷键
快捷键 作用 备注 ctrl + n 导航到类名 ctrl + shift + n 导航到文件 ctrl + e/ctrl + shift + e 打开到最近的文件/打开最近修改的文件 ctrl + ...
- JavaScript匿名函数知多少
在一些Javascript库中可以看见这种写法: function(){ //所有库代码代码 }(); 这样写的一个目的是——封装. JavaScript并不是面向对象的,所以它不支持封装.但是在不支 ...
- 【转】了解CNN
摘要 过去几年,深度学习在解决诸如视觉识别.语音识别和自然语言处理等很多问题方面都表现出色.在不同类型的神经网络当中,卷积神经网络是得到最深入研究的.早期由于缺乏训练数据和计算能力,要在不产生过拟合的 ...
- tp5.1 redis 使用
第一步:在框架根目录config里面新建redis.php文件配置ip及端口:如下: <?php return [ 'host' => '140.143.190.248', 'port' ...
- P2426 删数
P2426 删数 题目描述 有N个不同的正整数数x1, x2, ... xN 排成一排,我们可以从左边或右边去掉连续的i(1≤i≤n)个数(只能从两边删除数),剩下N-i个数,再把剩下的数按以上操作处 ...
- P1075 质因数分解
P1075 质因数分解 题目描述 已知正整数 n 是两个不同的质数的乘积,试求出两者中较大的那个质数. 输入输出格式 输入格式: 一个正整数 n . 输出格式: 一个正整数 p ,即较大的那个质数. ...
- json转java对象
用了平台之后很少再接触到java和js的底层代码,前几天远程帮一个萌新远程调试代码,这个萌新按照网上的教程去将json字符转java对象却一直报错.真相是它的json字符串格式不对,他的明明是一个数组 ...
- 前端路由的两种模式: hash 模式和 history 模式
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...