好的我们继续接着优化。这次优化用例库，我们要学习的是动态彩色边框技术！
先来看这样一段css：
.box::before { content: ''; border-radius: 5px; position: absolute; width: calc(100%); height: calc(100%); z-index: -1; background-image: linear-gradient(50deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet); background-size: 300%; animation: animate_bg 4s infinite; } @keyframes animate_bg { 0%, 100% { background-position: 0%, 50%; } 50% { background-position: 100%, 50%; } }
这段css，就是动态彩色边框的样式。我们放在顶部head里的style即可。那么问题来了，要怎么用呢？
原则来说 要用俩个div嵌套使用：
如图，给最外层的div的class上box，内部div或其他标签变白或半透明背景色。我们打开P_apis.html。 看看现在的弹层什么样：
找到它的代码：
可以看到是一个很大的div，我们给它最外层加上一个div，并给它class设置成box,并且重新设置部分位置大小属性：
改动比较大，所以大家可以复制下面的 直接替换：
{# 全局请求头 #} <div id="project_header_div" class="box" style="display: none;width: 70%; position: fixed;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;"> <div style="margin: 3px;border-radius:5px;height: 70%;padding-left: 10px;background-color: white"> <div class="btn-group" style="float: right"> <button onclick="project_header_save()" type="button" class="btn btn-success">保存</button> <button onclick="project_header_close()" type="button" class="btn btn-default">取消</button> </div> <span>请设置本项目的全局公共请求头：</span> <br><br> <div id="header_plan"> {% for i in project_header %} <input type="text" name="header_id" value="{{ i.id }}" style="display: none;"> <input type="text" name="header_name" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="请求头name"> = {" <input type="text" name="header_key" value="{{ i.key }}" style="width: 15%" placeholder="请求头key"> " : " <input type="text" name="header_value" value="{{ i.value }}" style="width: 50%" placeholder="请求头value"> "} <br> {% endfor %} </div> <br> <button onclick="add_project_header()">新增</button> <br><br> </div> </div>
然后我们去这个html最开头，head里的style上加入我们本章开头说的那个css：.box 别忘了前面的点
看看 这个动态边框的闪烁效果吧～
然后我们再给 全局域名也加上这个彩色边框，大家同样直接复制下面的代码替换原来的div即可：
{# 全局域名 #} <div id="project_host_div" class="box" style="display: none;width: 70%; position: fixed;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;"> <div style="margin: 3px;border-radius:5px;height: 70%;padding-left: 10px;background-color: white"> <div class="btn-group" style="float: right"> <button onclick="project_host_save()" type="button" class="btn btn-success">保存</button> <button onclick="project_host_close()" type="button" class="btn btn-default">取消</button> </div> <span>请设置本项目的全局域名：</span> <br><br> <div id="host_plan"> {% for i in project_host %} <input type="text" name="host_id" value="{{ i.id }}" style="display: none;"> <input type="text" name="host_name" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="name"> = " <input type="text" name="host_host" value="{{ i.host }}" style="width: 70%" placeholder="host"> " <br> {% endfor %} </div> <br> <button onclick="add_project_host()">新增</button> <br><br> </div> </div
看看效果：
好了本节内容到此结束。欢迎继续追。
