常用 CSS 代码片段集合[持续更新]

阻止滚动

内部盒子滚动到边界的时候，将触发整个页面滚动，可通过设置overscroll-behavior-x阻止此行为

div {
  height: 300px;
  width: 500px;
  overflow: auto;
  overscroll-behavior-x: contain;
}

使用 sroll-snap-type 优化滚动

在实际应用中，应用在全屏滚动或banner上有很多用武之地，不需要原始的各种尺寸位置计算

ul {
    scroll-snap-type: x mandatory;
}
 
li {
    scroll-snap-align: center;
}

横竖虚线

css自带的虚线在某些设计场景下不够用，通过linear-gradient绘制虚线。

// 横虚线
.dashed {
  height: 1px;
  width: 100px;
 background: linear-gradient(to right, #000, #000 5px, transparent 5px, transparent);
 background-size: 10px 100%;
}

// 竖虚线
.dashed {
  background: linear-gradient(to bottom, #000, #000 3.2px,transparent 3.2px, transparent);
  background-size: 100% 10px;
  width: 1px;
  height: 100px;
}

画格子

基于linear-gradient 渐变画格子，格子的角度及条纹之间的间隙可自行调整。

background-image:
  linear-gradient(
    90deg, 
    rgba(52,83,139,.5) 50%, 
    transparent 50%), 
  linear-gradient(
    rgba(52,83,139,.5) 50%, 
    transparent 50%)

文本溢出显示省略号

单行文本溢出，定义ellipsis函数方便调用

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis {
  @include ellipsis();
}

多行文本溢出，定义multi-ellipsis函数方便调用，line是对应的行数

@mixin multi-ellipsis($line: 1) {
  @if $line <= 0 {
      $line: 1;
  }

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

.ellipsis-1 {
  @include multi-ellipsis(1);
}

.ellipsis-2 {
  @include multi-ellipsis(2);
}

禁用鼠标事件

.disabled { 
  pointer-events: none; 
}