渐变

1
background-image: linear-gradient(-90deg,#16abb7 3%,#13d1be 98%);

不换行

1
white-space: nowrap; // 不换行

省略隐藏

  • 单行
1
2
3
overflow: hidden;
text-overflow: ellipsis; // 末尾添加省略号
white-space: nowrap;
  • 多行
1
2
3
4
5
height: 50px; // 需设置高度或最大高度 配合overflow隐藏
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 数量代表第几行末尾添加省略号
overflow: hidden;

分段

1
2
3
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; // 可将元素纵向分成三部分

这个可以简单实现瀑布流布局，但灵活性不好

flex + 栅格

  • flex有换行
  • 栅格有比例

两者结合可以非常灵活的实现响应式布局

布局

1
2
3
4
5
6
7
8
9
10
.parent{
    display: flex;
    min-height: 100%；
}
.header,.footer{
    height: 50px;
}
.center{
    flex: auto;  // 可自动占据剩下的宽度(ie不乐观)
}

转换盒属性

1
2
3
box-sizing: content-box; // 内容区域为盒子宽高

box-sizing: border-box;  // 边框以内为盒子宽高（比content盒子多padding+border）

模糊虚化背景

1
filter: blur(45px);

美化滚动条

1
2
3
4
5
6
7
body::-webkit-scrollbar{width:6px;height:6px;}
body{
    &::-webkit-scrollbar-track{background-color:#fff;border-radius: 10px;}
    &::-webkit-scrollbar-thumb{background-color:rgba(144,147,153,.5);border-radius: 10px;}
    &::-webkit-scrollbar-thumb:hover {background-color: rgba(144,147,153,.7)}
    &::-webkit-scrollbar-thumb:active {background-color:#F56C6C}
}
  • 此在移动端也会生效，可将其限制屏幕宽度，移动端默认看不到滚动条
1
2
@media (min-width: 769px){}
@media (max-width: 768px){}

选择器配合

1
2
3
4
5
6
// 非最后一项
a:not(:nth-last-child(1)){
  .order-item{
    border-bottom: 4px solid #f9f9f9;
  }
}