文字省略

.ellipsis {
  white-space: nowrap; // 指定元素内的空白怎样处理
  overflow: hidden;
  text-overflow: ellipsis;  //当文本溢出包含它的元素时，应该如何显示
}
.ellipsis-multi {
  display: -webkit-box;  // 设置容器显示为webkit盒子
  -webkit-box-orient: vertical; // 指定一个box子元素是否应按水平或垂直排列,设置盒子内文字显示方向
  -webkit-line-clamp: 2; // 将块容器的文字限制为指定的行数,并用省略号填充尾部
  overflow: hidden;
}

文字渐变

background-image: linear-gradient(to top, #00C6FF, #8AFFD2); /* 线性渐变背景，方向向上 */

-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */

-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */

content换行符与打点loading效果

CSS世界demo演示 (cssworld.cn)

HTML：
正在加载中<dot>...</dot>
CSS：
dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

'\A'其实指的是换行符中的 LF 字符，其 Unicode编码是 000A，在 CSS 的 content 属性中则直接写作'\A'；换行符除了 LF 字符还有 CR 字符，其 Unicode 编码是 000D，在 CSS 的 content 属性中则直接写作'\D'。CR 字符和 LF 字符分别指回车（CR）和换行（LF）

box-shadow

四个px值: x轴偏移量、y轴偏移量、模糊半径、扩散半径和颜色