我们本节开始继续去搞 接口库的主题外观，开搞之前，我们先学习下边框彩色的css：
代码语言：javascript复制border-image:linear-gradient(to right,#ff8cd0,#77a4cb,#ff8cd0,#fff5d3) 1 10;这个是给border边框 改成彩色的css样式，颜色同样可以自行添加。
先看下我们当前的接口库：
就像是个毛坯房对吧。
先改顶部菜单中 接口库 这个按钮颜色吧，既然选中它，那么就让它炫酷一点！
打开P_apis.html,给接口库这个超链接a标签内加入样式：
然后是整个顶部菜单的边框：
然后再给顶部菜单的背景色变白并加入阴影：
效果如下：
注意，这里我们并没有采用 公共的顶部菜单，而是当时简单的进行复制多份，所以我们要把这几处变化，依次复制粘贴到 用例库/项目设置/全局变量。
当然，我们可以更简单的把整个顶部菜单进行复制，然后直接覆盖到其他三个页面来减少我们一个个修改的成本。不过要注意这个li 标签的 class="active"，它表示当前哪个按钮正在点击状态。还有后面的style 都要跟着移动到对应的 li标签内：
比如用例库：
依次弄好剩余的即可。
你可能会觉得这样麻烦，其实我们很早之前可以利用 {% include %}的引入技术来实现会更简单，这里懂的小伙伴可以自行修改。
顶部菜单完成之后。就是具体接口的那五个按钮了。
为了凸显调试按钮，我们仍然是对其进行特殊颜色设置，其他几个按钮仍然无色，避免页面五颜六色过多，失去层次感。
注意上面画线的三处都要修改：
然后是底部按钮组：（注意颜色要浅，以免喧宾夺主）
效果如下：
再回头看看刚开始的样子是不是觉得 现在漂亮不少呢？大家也可以自己设计各种炫酷的主题哦～
下节课内容我们去改用例库吧～
