常用css式样

zhangxinrongr

已于 2023-11-07 17:52:08 修改

阅读量39

点赞数

分类专栏： css 文章标签： css css3

于 2023-11-07 17:51:16 首次发布

本文链接：https://blog.csdn.net/zhangxinrongr/article/details/134272848

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

// Mixin flex 垂直居中布局
@mixin flex-center() {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

//  三点省略 支持单行多行
// Mixin { n:Number } n：省略行数限制 
@mixin ellipsis($n) {
  overflow: hidden;
  text-overflow: ellipsis;

  @if $n>1 {
    display: -webkit-box;
    -webkit-line-clamp: $n;
    -webkit-box-orient: vertical;
  }

  @else {
    white-space: nowrap;
  }
}

// 按钮变大效果
@mixin btn-bigger() {
  transform: scale(1.2);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1);
}