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怎么实现圆角”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！