sass怎么实现圆角

发布时间:2022-03-25 09:21:38 作者:iii
来源:亿速云 阅读:178

本篇内容主要讲解“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怎么实现圆角”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. Sass:初识Sass与Koala工具的使用
  2. sass学习笔记(三):sass的变量及嵌套

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

sass

上一篇:Git仓库搭建及分支管理的方法

下一篇:checkbox组件怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》