less常用属性集合

//1.圆角
.radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
-khtml-border-radius:@radius;
}
//右上圆角
.radius_tr(@radius){
border-top-right-radius: @radius;
-moz-border-radius-topright:@radius;
-webkit-border-top-right-radius: @radius;
}
//左上圆角
.radius_tl(@radius){
border-top-left-radius: @radius;
-moz-border-radius-topleft:@radius;
-webkit-border-top-left-radius: @radius;
}
//右下圆角
.radius_br(@radius){
border-bottom-right-radius: @radius;
-moz-border-radius-bottomright:@radius;
-webkit-border-bottom-right-radius: @radius;
}
//左下圆角
.radius_bl(@radius){
border-bottom-left-radius: @radius;
-moz-border-radius-bottomleft:@radius;
-webkit-border-top-bottom-radius: @radius;
}
//透明度
.opacity(@alpha,@alpha1){
opacity:@alpha;
filter:alpha(opacity=@alpha1); /*IE专用*/
-moz-opacity:@alpha; /*火狐（firefox）*/
}
//阴影
(1)
.boxShadow(@x,@y,@blur,@color){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
(2)
.shadow(@x,@y,@blur,@r,@g,@b,@alpha){
-webkit-box-shadow: @x @y @blur rgba(@r, @g, @b, @alpha);
-moz-box-shadow: @x @y @blur rgba(@r, @g, @b, @alpha);
box-shadow: @x @y @blur rgba(@r, @g, @b, @alpha);
}
(3)
.boxshadow(@right_left:5px,@bottom_top:5px,@box :5px,@box_color:#b6ebf7){
box-shadow:@arguments;
-moz-box-shadow:@arguments;
-webkit-box-shadow:@arguments;
}
//3.列
.column(@width,@count){
column-width:@width; /*每列宽度*/
-moz-column-width:@width;
-webkit-column-width:@width;
column-count: @count; /*列数*/
-moz-column-count: @count;
-webkit-column-count: @count;
}
//4.渐变
.q-grad(@origin: top, @alpha: 0.3,@alpha1:0.6) {
background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,.0), rgba(0,0,0,@alpha),rgba(0,0,0,@alpha1));
background-image: -moz-linear-gradient(@origin, rgba(0,0,0,.0), rgba(0,0,0,@alpha),rgba(0,0,0,@alpha1));
background-image: -o-linear-gradient(@origin, rgba(0,0,0,.0), rgba(0,0,0,@alpha),rgba(0,0,0,@alpha1));
background-image: -ms-linear-gradient(@origin, rgba(0,0,0,.0), rgba(0,0,0,@alpha),rgba(0,0,0,@alpha1));
background-image: linear-gradient(@origin, rgba(0,0,0,.0), rgba(0,0,0,@alpha),rgba(0,0,0,@alpha1));
}
.gradient(@angle:top,@start:#000,@stop:#ff050e){
background: -webkit-linear-gradient(@angle,@start,@stop);
background: -moz-linear-gradient(@angle,@start,@stop);
background: -o-linear-gradient(@angle,@start,@stop);
background: linear-gradient(@angle,@start,@stop);
}

//流式布局flex
.flex(){
display: flex;
display: -webkit-flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
}
.flowwrap(){
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
//分栏
.column(@width,@count){
column-width:@width; /*每列宽度*/
-moz-column-width:@width;
-webkit-column-width:@width;
column-count: @count; /*列数*/
-moz-column-count: @count;
-webkit-column-count: @count;
}
//移动变换-平移
.translate(@x,@y){
transform: translate(@x,@y);
-webkit-transform: translate(@x,@y);
-moz-transform: translate(@x,@y);
-o-transform: translate(@x,@y);
-ms-transform: translate(@x,@y);
}
/*单行文本省略*/
.ellipsis(){
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}

p{
.wrap;
}