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怎么實現圓角”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！