标签：box 145 全局 100% 平台 边框 background div 夏日

     好的我们继续接着优化。这次优化用例库，我们要学习的是动态彩色边框技术！

    先来看这样一段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>

看看效果：

好了本节内容到此结束。欢迎继续追。

标签：box,145,全局,100%,平台,边框,background,div,夏日
来源： https://blog.51cto.com/u_15282986/2967749

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。