CSS如何代替手绘切图？

难

即便用canvas来画，也成本高了。
但是UI设计师神奇画笔下总能出现各种酷炫炸天的视觉稿，以及脑洞开天的动效Σ(っ °Д °;)っ
这种时候就要区分哪些动画效果需要切图配合展现，哪些效果可以使用纯代码来实现了。

---

动画效果，我个人分为三种A（代码完全难以实现，比如画个高达出来@_@）、B（使用CSS3新属性如transform或background-image/border-image的渐变方法或叠加多层div，可以实现）、C（可以实现，规则图形组成）

不能实现的效果

种类A
不管尺寸是大是小也只能切图了，需要动效就用序列帧、webp、透明视频。
序列帧就是用图片一张张替换播放，速度快点就像快翻小人书一样，慢点就像定格动画。
webp是一种新型图片格式，类似于gif的升级版，体积更小，清晰度更高，支持透明。
透明视频做法则是通过遮罩mask、混合模式等去除黑色背景 或者 使用带alpha通道的webm格式视频。
详细解决方案：

种类B
这种可以通过代码实现的较复杂效果，如果尺寸较小，切图ok；如果尺寸较大，权衡使用代码实现。

1. transform：
   视觉稿中出现如梯形、长方形去角图形等等，这些通过如下都是可以实现的。
   （1）父级div用overflow:hidden; 子级div用transform的skew方法，例如：

<div class="shadow"></div>
<div class="line">
<style>
.shadow {
    position: relative;
    width: 368px;
    height: 122px;
    overflow: hidden;
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: -20px;
      width: 408px;
      height: 122px;
      box-sizing: border-box;
      transform: skewX(35deg);
      background-image: linear-gradient(
        90deg,
        rgba(1, 184, 189, 0.7) 0%,
        rgba(0, 103, 142, 0.5) 100%
      );
    }
  }
  .line {
    position: relative;
    width: 368px;
    height: 122px;
    overflow: hidden;
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: -20px;
      width: 408px;
      height: 122px;
      box-sizing: border-box;
      transform: skewX(35deg);
      border: 3px solid #3b8899;
      background-image: linear-gradient(
        125deg,
        #3b8899 0%,
        #3b8899 49px,
        transparent 50px,
        transparent 346px,
        #3b8899 347px,
        #3b8899 100%
      );
    }
  }</style>

（2）三角形和长方形拼接

缺点在于（1）多了多个无意义的div（2）有时要考虑到多个transform叠加可能会有复合层的问题。
但是对于大尺寸的图片来说还是很优化内存和加载速度的。不同情况，权衡考虑。
例：若需要适应宽高的四边形去角背景，可以尝试切图头尾的不规则部分，然后中间规则长方形的部分用代码就自适应了。

ps：拼接要注意长宽取整否则可能会有空隙。

2. background-image/border-image: linear-gradient(...)/radial-gradient(...)：
   两个斜渐变也可以实现梯形背景、四个斜渐变就可以实现长方形去角背景等等，但是因为会有颜色的叠加，所以只适用于无透明度的背景。
   border-image用渐变就可以实现边框断一块的效果。

   
   直角梯形和断边框

border: 3px solid #2fb1bb;
box-sizing: border-box;
border-image: linear-gradient(
    to right,
    #2fb1bb 0%,
    #2fb1bb 549px,
    transparent 550px,
    transparent 580px,
    #2fb1bb 581px,
    #2fb1bb 100%
  )
  3;

ps：但是对于有不规则曲度的效果，就要用到canvas来实现了。

种类C
可以简单实现的就用代码吧，首先尝试CSS，然后思考使用canvas实现。

---

不同情况，不同考虑，没有完美的实现方案，只有合适的实现方案。