移动端的开发，设计稿经常会有一些稍微“特殊”但又比较常见的效果~

1. "加载中..."效果

三个点，是有动效的，从 . 变成 .. 再变成 ...，无限循环

<p>正在为您跳转<span class="dotting">...</span>

.dotting {
  display: inline-block;
  height: 1em; line-height: 1;
  vertical-align: -.25em;
  overflow: hidden;
  &::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 2s infinite step-start both;
    text-align: left;
  }
}
@keyframes dot {
  33% { transform: translateY(-2em); }
  66% { transform: translateY(-1em); }
}

2. 虚线

视觉稿的虚线样式，往往与用 border: 1px dotted/dashed #000 实现的效果不一样。类似下面截图： 【实现方法】伪元素（也可以不用） + 线性渐变背景色

div::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, transparent 0%, transparent 50%, #979797 50%, #979797 100%);
  background-size: 16px 1px;
  background-repeat: repeat-x;
}

3. pre 标签文本超长时自动换行

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

4. 磨砂玻璃效果

【视觉稿设计效果】

【实现方法】：伪元素（因为是背景磨砂） + backdrop-filter

<div>我要磨砂背景</div>

div {
  position: relative;
  z-index: 1;
  &::after {
    display: block;
    content: '';
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%;
    position: absolute;
    z-index: -1;
    background-color: #212121;
    backdrop-filter: blur(10px); 
  }
}

【注意点】

浏览器不同版本对 backdrop-filter 属性的支持不同，具体请看：developer.mozilla.org/zh-CN/docs/…

实际开发中，发现不生效时，console 一下 navigator.userAgent 对比一下~

5. 渐变色边框

【实现方法一】

div {
    border: 1px solid;
    border-image: linear-gradient(to right, #D59A60, #FFCF99) 1;
}

【存在问题】

border-image 属性会导致 border-radius 失效。

【实现方法二】

div {
 background-image: linear-gradient(to right, #D59A60, #FFCF99);
 position: relative;
}
div::before {
 border-radius: 5px;
 display: block;
 content: '';
 position: absolute;
 width: calc(100% - 6px);
 height: calc(100% - 6px);
 background-color: #fff;
 top: 3px;
 top: 3px;
}

【存在问题】

Android 真机，显示效果很丑，四个角完全不是细细的边框（截图以后补）；IOS 没有试