CSS片段

173 阅读1分钟

卡片阴影

.box-shadow {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .12);
}

多行省略(ie使用line-height截取)

@mixin ellipsis($rowCount: 1) {
  @if $rowCount <= 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $rowCount;
    -webkit-box-orient: vertical;
  }
}

.line1-overflow {
  @include ellipsis(1);
}

.line2-overflow {
  @include ellipsis(2);
}

.line3-overflow {
  @include ellipsis(3);
}

滚动条样式

/* 修改浏览器默认滚动条样式 */
/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgb(255, 255, 255);
  border-radius: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(201, 201, 202);
  border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(162, 162, 163);
}