采用css实现流动的边框

　　问题起缘一个曾经做过的项目， 类似excel那样， 选中单元格并复制或粘贴时有个边框流动的效果， like this:

　　　　　　　

　　在前端要作出这种效果可能方法并不少， 不过我只想到了2种， 真边框与假边框， 真边框的意思就是说切实的通过css里的border来实现， 另一种就是找替代边框。

　　实现效果如下：

　　　　　　

　　　　　　　　　　　　　　图1为假边框， 图二为真边框

　　1.　先说说假边框？ 对， 因为这个在我看来更容易实现， 思路也更清晰。

　　　　　　假设要创建一个 <div id = 'content'></div> 带流动的边框，  考虑给content添加一个父节点node: <div id='box'></div>， 结果就是:

　　　　<div id='box'> <div id='content'></div> </div>, 给box加下padding: 4px; 给content加个background: white; 给box加上流动的背景就OK， 如此就将

　　　　边框转嫁到box的背景上了。那如何设置流动的背景呢？ 用css动画就OK了， 效果图1， 代码如下。

　　　　代码：

　　　　　　html:

　　　　　　　　<div id='box'>
　　　　　　　　　　<div id='content'></div>
　　　　　　　　</div>

　　　　　   css:

　　　　　　　　#content{

　　　　　　　　　　width: 100%;

　　　　　　　　　　height: 100%;

　　　　　　　　　　background: white

　　　　　　　　}

　　　　　　　　#box{　　　　　　　　　　

　　　　　　　　　　width: 200px;
　　　　　　　　　　height: 200px;

　　　　　　　　　　padding: 2px;

　　　　　　　　　　/* 背景为白黑条纹 */

　　　　　　　　　　background:

　　　　　　　　　　　　-webkit-repeating-linear-gradient(
　　　　　　　　　　　　　　-45deg,
　　　　　　　　　　　　　　transparent,
　　　　　　　　　　　　　　transparent 5px,
　　　　　　　　　　　　　　#000000 5px,
　　　　　　　　　　　　　　black 10px

　　　　　　　　　　　　);

　　　　　　　　　　/*动画 'flow-light' 0.2s 一次， 无限循环*/
　　　　　　　　　　-webkit-animation: flow-light .2s infinite linear;

　　　　　　　　}　　　　　　

　　　　　　　　@-webkit-keyframes flow-light{
　　　　　　　　　　100% {
　　　　　　　　　　　　/* 背景为黑白条纹 */
　　　　　　　　　　　　background:
　　　　　　　　　　　　　　-webkit-repeating-linear-gradient(
　　　　　　　　　　　　　　　　-45deg,
　　　　　　　　　　　　　　　　#000000,
　　　　　　　　　　　　　　　　#000000 5px,
　　　　　　　　　　　　　　　　transparent 5px,
　　　　　　　　　　　　　　　　transparent 10px);
　　　　　　　　　　　　　　};
　　　　　　　　}

　　2. 通过第一种实现方式， 不难想到第二种实现方式， 我们只要边框为条纹边框， 并设置动画就OK了， 好在我们有border-image这个属性， 效果如图2， 代码如下　

　　　　代码：

　　　　　　html:

　　　　　　　　
　　　　　　　　　<div id='content'></div>

　　　　　   css:

　　　　　　　　#content{

　　　　　　　　　　width: 200px;

　　　　　　　　　　height: 200px;

　　　　　　　　　　box-sizing: border-box;

　　　　　　　　　　border: 4px transparent;　　　　　　　　　　

　　　　　　　　　　border-image:
　　　　　　　　　　　　-webkit-repeating-linear-gradient(
　　　　　　　　　　　　　　-45deg,
　　　　　　　　　　　　　　transparent,
　　　　　　　　　　　　　　transparent 5px,
　　　　　　　　　　　　　　#000000 5px,
　　　　　　　　　　　　　　black 10px)
　　　　　　　　　　　　　　10 10 round;
　　　　　　　　　　-webkit-animation: border-animation .3s infinite;

　　　　　　　　}　

　　　　　　　　@-webkit-keyframes border-light{
　　　　　　　　　　100% {
　　　　　　　　　　　　/* 背景为黑白条纹 */
　　　　　　　　　　　　border-image:
　　　　　　　　　　　　　　-webkit-repeating-linear-gradient(
　　　　　　　　　　　　　　　　-45deg,
　　　　　　　　　　　　　　　　#000000,
　　　　　　　　　　　　　　　　#000000 5px,
　　　　　　　　　　　　　　　　transparent 5px,
　　　　　　　　　　　　　　　　transparent 10px);
　　　　　　　　　　　　　　};
　　　　　　　　}