标签：android style blog color io os ar for 文件
// 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
面的一旦定义好的话,下次就直接.border-box()这样调用就行了.省了不少时间.感觉很棒.当然做事不能只做不一般.是吧.这个 在上一道pc端的兼容less代码.
/** * 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; } //备用动画
标签：android style blog color io os ar for 文件
原文地址：http://www.cnblogs.com/gredswsh/p/less-for-css3.html
