在上一篇《手淘Web页面Bar和纵向适配的设计》中聊了互动项目中Bar的工业化标准设计以及对刘海设备带来的变化。我把这一点称为标准化Bar设计给适配带来的优势。今天这篇文章中主要想再花点时间聊聊今年手淘“PK赢能量”互动项目中前端有哪些技术亮点和尝鲜。当然文章涉及到的技术点估计有很多同学都有接触或者使用过。毕竟CSS仅仅是一门表现层语言。废话不多说，直接进入主题吧！

面对场景

估计有很多同学已经参与“PK赢能量”互动游戏中，但还是花一点点时间聊一下技术面对的场景（指的是CSSer），这样更好开始讲述我们今天的故事。

大家不难发现，为了营造双十一过节的氛围，设计往往都是非常热情，奔放的。颜色多，颜色艳等等。这对于Web开发人员是件头痛的事情，为什么头痛呢？比如一个开发面对这些场景时：

边框是渐变的都算了，还是七彩的，还是七彩的，想哭！

上图的场景相对而言比第一张要简单多了，但对于带阴影的Tooltips，还是令人生畏的，特别还是带渐变的三角。

一个破提示框，除了带阴影都算了，小三角还是不规则的！昵玛，不规则都算了，还有渐变！还让不让前端活！估计此时前端对视觉设计师应该是这样的：

其实前端对视觉还是很有爱的，因为前端耐操。

既然都这么皮实了，那就再撸一发，顺便用代码把下面的也解了：

图片能省就省嘛，这些都是钱！说不定老板一高兴，给你加薪晋级！

其实我们是一群有追求的人，越难的事情，对我们来说越具挑战性，越有那么一种冲动。

谁说不是呢？这叫作！人家说不作死不会死！

其实类似上面的场景，对于互动团队的同学而言是家常便饭，见怪不怪了！而往往面对这样的场景，大家第一意识形态就是我用图片解决一切！现在谁还差那么一点带宽呢？包个月，几十G来了，解决一切！

谁说不是呢？但很多时候用图片也有用图片难处：

• 难适应产品多变的需求
• 难扩展，总不可能备好成千上万种尺寸的图吧
• 难维护，这么多图，哪是用哪
• 浪费资源
• 影响性能
• 等等... 想到了再继续加

我还是想打破一下规矩，借着双十一大促的活动来验证一些技术点。因为：

** 扛得住双十一的，还有什么不能扛呢？以后可以说，咱绝对耐操！**

渐变边框

我把七彩的边框称为渐变边框，这样显得更为专业一点。通过设计图，不难发现，边框采用了渐变颜色，如下图所示：

对CSS了解的同学，要实现类似这样的渐变边框效果，首先会想的是CSS的 border-image 属性。的确如此，我首先想的也是该属性，而且该属性可以很容易实现类似的效果，比如：

.gradient-border{
    border: 5px solid transparent;
    border-image: linear-gradient(to bottom, #0099CC, #F27280);
    border-image-slice: 1;
}

效果如下：

虽然border-image和linear-gradient()配合在一起，能实现渐变的边框效果，但它也有一定的缺陷性，比如我们项目中的按钮是带圆角的。那么对于这种情形，就算是你使用了border-radius也是无用：

这是因为border-image中引用的是一张不带圆角的图片（linear-gradient()就相当于一张背景图）。也就是说，如果你需要一个带圆角的渐变边框，那么使用border-image是有局限性的，除非人肉为其准备带圆的背景图，或者有更好的办法通过代码绘制一个带圆角的背景图~

此路似乎在这个项目中行不通，只能考虑换用别的方法。仔细一想，我可以把带有渐变边框的元素分成两层：

这样一来似乎要容易的多了，一层一个元素：

<div class="gradient-border">
    <div class="content"></div>
</div>

甚至我们还可以通过伪元素::before或::after来模拟一个层。比如下面这个示例：

.gradient-border {
    --borderWidth: 5px;
    border-radius: var(--borderWidth);
    background: #fff;

    &::before {
        content: '';
        position: absolute;

        top: calc(-1 * var(--borderWidth));
        left: calc(-1 * var(--borderWidth));
        height: calc(100% + var(--borderWidth) * 2);
        width: calc(100% + var(--borderWidth) * 2);
        background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
        border-radius: calc(2 * var(--borderWidth));
        z-index: -1;
    }
}

效果如下：

是不是感觉越来越接近设计稿了：

加个元素或加个伪元素总是那么的不舒服，那怎么办呢？有没有更好的方案。其实CSS的世界是很有魅力的，只要你敢去想，有很多东西你意想不到。

既然可以分成元素层让两个渐变或两张图叠加在一起做一个差值，从而实现效果。那么为什么不可以直接在背景中采用两个层（两张背景图）叠加在一起。

这是一个很好的方案，也是一个大胆的思路。到目前为止，CSS的多背景方案已经是一个很成熟的技术方案。这样一来，咱们就可以在background来做我们想要的效果了：

.gradient-border{
    background-image: 
        radial-gradient(circle at 50% 0%, #fff000 50%,#ffcd00 100%),
        linear-gradient(101deg, #ffc46d, #fa0055);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

每一个关键点的颜色我们都可以在设计稿中获取：

很多时候都不用这么复杂，如果你的稿子是Sketch的话，就更简单了，你可以直接从设计稿中把相应的样式复制过来。这也就是我为什么喜欢Sketch的原因。

就是这么的简单，效果出来了，只需要设计师点个头了：

看上去很简单吧！不知道你是否有想到过这样的方案？方案虽然简单，但这里有几个点需要特别的强调：

• 运用多背景时，第一个背景的层级最高，显示在最前面
• background-origin设置为border-box
• background-clip设置为padding-box（也可以是content-box），但模拟边框的部分需要是border-box

这里最为关键的就是 background-origin 和 background-clip 灵活的配合在一起使用。至于这两个属性如何使用，就不在这里科普了，感兴趣的同学可以自己去查阅相关文档。

咱们进一步思考一下，如果有一天，设计师或者需求方想要的效果不是规则图形，或者说想要的渐变边框能带动效的。会不会继续让我们蒙蔽呢？在CSS中，虽然animation和transition能让你的元素动起来，而且效果还能不错，但在CSS中的动画也是有一定的局限性的，到目前为止，很难在背景图像（这里说的是gradient相关属性绘制的背景图）做动画。

**简单地说，使用animation和transition很难改变渐变的状态**。（但借助CSS Houdini还是可以做到的）。这已经超出我们今天这篇文章探讨的范围。我们还是回到今天的主题上来。

为了尽量的满足设计师的需求，就算是不规则的渐变边框或者让你的渐变边框动起来，我们也要想办法。这里给大家推荐一个未来的CSS特性：clip-path 。这个属性到目前为止已经得到近80%主流浏览的支持。在不