本篇內(nèi)容主要講解“sass怎么實(shí)現(xiàn)圓角”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“sass怎么實(shí)現(xiàn)圓角”吧!
創(chuàng)新互聯(lián)建站主營白山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app開發(fā)定制,白山h5小程序設(shè)計(jì)搭建,白山網(wǎng)站營銷推廣歡迎白山等地區(qū)企業(yè)咨詢
//文字顯示行數(shù)隱藏=======================================================
@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;
}
}
//動(dòng)畫時(shí)間======================================================
@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 { //實(shí)心按鈕
border:$size $btnline $bgcolor;
background: $bgcolor;
color: $txtcolor;
border-radius: $radius;
&:hover{
background: lighten($bgcolor,10%); //sass顏色函數(shù) 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顏色函數(shù) 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怎么實(shí)現(xiàn)圓角”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
重慶分公司
重慶分公司
