// less 文件 (移动端通用less文件)// 作者 marchen// 时间 2014/9/1// 协议 MIT // 只考虑webkit内核手机浏览器和火狐内核浏览器// 自定义less 混合函数/*********** CSS3样式合集 *************///盒子模型 边框计算.border-box() {box-sizing:border-box;-webkit-box-sizing:border-box;}//圆角.border-radius(@radius:2px) {-moz-border-radius:@radius;-webkit-border-radius:@radius;border-radius:@radius;}//变形.transform(@all) {-moz-transform:@all;-webkit-transform:@all;transform:@all;}//过渡.transition(@all) {-moz-transition:@all;-webkit-transition:@all;transition:@all;}//常用过渡.transiton() {-moz-transition:all .7s .1s ease;-webkit-transition:all .7s .1s ease;transition:all .7s .1s ease;} /*可以自定义修改*///动画.animation(@all) {-moz-animation:@all;-webkit-animation:@all;animation:@all;}//常用动画.animation(@name) {-moz-animation:@name 1s 0s 1 ease both;-webkit-animation:@name 1s 0s 1 ease both;animation:@name 1s 0s 1 ease both; }//字体特效.text-shadow-light(@blur:2px) {text-shadow: 0px 0px @blur white;}/*可发挥想象定义常用字体特效*///盒子阴影.box-shadow(@all) {-moz-box-shadow:@all;-webkit-box-shadow:@all;box-shadow: @all;}//常用盒子阴影.box-shadow-light(@blur) {-moz-box-shadow:0px 0px @blur white;-webkit-box-shadow:0px 0px @blur white;box-shadow: 0px 0px @blur white; }//文字旋转.text-rotate(@angle:45deg) {-webkit-transform: rotate(@angle);-moz-transform: rotate(@angle);transform:rotate(@angle);}//字体.font-face(@fontname,@fontdir) { //字体名称 string 字体文件目录@font-face {font-family: @fontname;src: url(‘@{fonturl}/@{fontname}.eot‘);src: url(‘@{fonturl}/@{fontname}.eot?#iefix‘) format(‘embedded-opentype‘), url(‘@{fonturl}/@{fontname}.woff‘) format(‘woff‘), url(‘@{fonturl}/@{fontname}.ttf‘) format(‘truetype‘), url(‘@{fonturl}/@{fontname}.svg#@{fontname}‘) format(‘svg‘);font-weight: normal;font-style: normal;}}//渐变 (简单的二种颜色的渐变).linear-gradient(@angle:45deg,@start-color:rgba(0,0,0,1),@stop-color:rgba(255,255,255,1) {background: -moz-linear-gradient(@angle, @start-color 0%, @stop-color 100%); /* ff3.6+ */background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, @start-color), color-stop(100%, @stop-color)); /* safari4+,chrome */background: -webkit-linear-gradient(@angle, @start-color 0%, @stop-color 100%); /* safari5.1+,chrome10+ */background: linear-gradient(@angle, @start-color 0%, @stop-color 100%); /*w3c*/ }/******************************************* 小工具 *********************************************///长单词强制换行.wrap() {text-wrap: wrap;white-space: -moz-pre-wrap;white-space: pre-wrap;word-wrap: break-word;}/******************************************* 各种移动端bug修复 **********************************///去掉手持设备点击时出现的透明层(一般在头部做格式化).delete-highlight(){a,button,input{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */}}//去掉苹果浏览器自带input[submit/reset/button]的ui渲染效果.delete-appearance() {input[type="submit"],input[type="reset"],input[type="button"],button {-webkit-appearance: none;}}//移动端bug汇总//bug一：现象：//android4.0以上一部分手机的webview中，当canvas小于屏幕大小时，绘图时会出现重影，就是说一个图只绘制了一遍，却出现了两个解决方案：canvas外层的div需要设定属性style="overflow:visible;-webkit-transform: translateZ(0);*///bug二：//现象：android4.x中一部分手机，在改变canvas大小的时候有时会卡死。大家可能都知道，重新设定canvas的大小可以实现canvas的完全刷新，但是也会导致一部分4.x手机卡死。//解决方案：用clearRect刷新canvas。*///欢迎更新更多的bug

/** * author marchen * time 2014/8/20 * MIT * style 编译为css后在运行 *//////////////////////less maxmin will be delete //////////////////////////////////border-radius .border-radius(@width:2px) {    border-radius: @width;-moz-border-radius: @width;-webkit-border-radius: @width;-o-border-radius: @width;-ms-border-radius: @width;}//transform-origin .transform-origin(@x:center,@y:center) {    transform-origin: @x @y;-webkit-transform-origin: @x @y;-moz-transform-origin: @x @y;-o-transform-origin: @x @y;-ms-transform-origin: @x @y;}//perspective-origin .perspective-origin(@x:center,@y:center) {    perspective-origin: @x @y;-webkit-perspective-origin: @x @y;-moz-perspective-origin: @x @y;-o-perspective-origin: @x @y;-ms-perspective-origin: @x @y;}//transform-style .transform-style(@style:flat) {    transform-style: @style;-moz-transform-style: @style;-webkit-transform-style: @style;-o-transform-style: @style;-ms-transform-style: @style;}//transform .transform(@rotate:0deg,@scale:0,@skew:0deg,@translate:0px) {    transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);}//animate .animate(@all) {    animation: @all;-webkit-animation: @all;-moz-animation: @all;-o-animation: @all;-ms-animation: @all;}.animate(@name,@duration:1s,@delay:0s,@ease:ease,@count:1,@direction:normal,@end:both) {    animation: @name @duration @delay @count @ease @end @direction;-webkit-animation: @name @duration @delay @count @ease @end @direction;-moz-animation: @name @duration @delay @count @ease @end @direction;-o-animation: @name @duration @delay @count @ease @end @direction;-ms-animation: @name @duration @delay @count @ease @end @direction;}//transition .transition(@all) {    transition: @all;-webkit-transition: @all;-moz-transition: @all;-o-transition: @all;-ms-transition: @all;}.transition(@property,@duration:0.7s,@delay:0.1s,@ease:ease) {    transition: @arguments;-webkit-transition: @arguments;-moz-transition: @arguments;-o-transition: @arguments;-ms-transition: @arguments;}//text-shadow  text effect .text-shadow(@all) {    text-shadow: @all;}.text-shadow(@color:black,@x:1px,@y:1px,@offset:2px) {    text-shadow: @arguments;}.text-light(@color:white,@blur:15px) {    text-shadow: 0px 0px@blur @color;}.text-apple(@tcolor:#000,@x:0,@y:1px,@blur:1px,@color:#fff) {    color: @tcolor;text-shadow: @x @y @blur @color;}.text-emboss() {    color: #ccc;    text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444;}.text-blur(@color:black,@blur:5px) {    color: transparent;    text-shadow: 0 0@blur @color;}//box-shadow .box-shadow(@all) {    box-shadow: @all;-moz-box-shadow: @all;-webkit-box-shadow: @all;-o-box-shadow: @all;-ms-box-shadow: @all;}.box-shadow(@x:0px,@y:0px,@blur:2px,@color:#605F5F) {    box-shadow: @arguments;-moz-box-shadow: @arguments;-webkit-box-shadow: @arguments;-o-box-shadow: @arguments;-ms-box-shadow: @arguments;}//text-rotation .text-rotation(@rotate:0deg) {    transform: rotate(@rotate);-webkit-transform: rotate(@rotate);-moz-transform: rotate(@rotate);-o-transform: rotate(@rotate);-ms-transform: rotate(@rotate);writing-mode: lr-tb;}//备用动画