sass怎么实现圆角
本篇内容主要讲解"sass怎么实现圆角"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"sass怎么实现圆角"吧!
//文字显示行数隐藏=======================================================
@mixin lines($line:1){
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
}
//圆角=======================================================
@mixin radius($radius:5px){
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
-o-border-radius:$radius;
-ms-border-radius:$radius;
-khtml-border-radius:$radius;
border-radius:$radius;
}
//边框=======================================================
@mixin border($path,$size: 1px,$type: solid,$color: #efefef){
@if $path == all {
border:$size $type $color;
}@else{
border-#{$path}:$size $type $color;
}
}
//动画时间======================================================
@mixin antime($time:1s){
transition: $time;
-moz-transition: $time;
-webkit-transition: $time;
-o-transition: $time;
}
//阴影=======================================================
@mixin shadow($shadowx:15px,$shadowy:15px, $shadowz:15px, $shadowcl:#000){
-webkit-box-shadow: $shadowx $shadowy $shadowz $shadowcl;
-moz-box-shadow: $shadowx $shadowy $shadowz $shadowcl;
box-shadow: $shadowx $shadowy $shadowz $shadowcl;
}
//按钮=======================================================
@mixin btn($type,$size: 1px,$btnline: solid,$bgcolor: #fff,$txtcolor: #333,$radius: 3px){
@if $type == solidbtn { //实心按钮
border:$size $btnline $bgcolor;
background: $bgcolor;
color: $txtcolor;
border-radius: $radius;
&:hover{
background: lighten($bgcolor,10%); //sass颜色函数 lighten
}
&:focus{
outline: none !important;
}
}@else if $type == emptybtn{ //空心按钮
border:$size $btnline $txtcolor;
background: $bgcolor;
color: $txtcolor;
border-radius: $radius;
&:hover{
background: lighten($bgcolor,10%); //sass颜色函数 lighten
}
&:focus{
outline: none !important;
}
}
}
//链接======================================================
@mixin link($cl:#333,$hovercl:#666,$visited:#999){
color: $cl;
&:hover{
color: $hovercl;
}
&:visited{
color: $visited;
}
}
//透明度=======================================================
@mixin opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); //IE8
}
到此，相信大家对"sass怎么实现圆角"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
