大屏展示边框太丑？纯css撸9个实用边框（性能提高120%）

项目中做过大屏数据展示的应该都使用过Datav，里面有很多酷炫边框。 但是他有个致命的问题，严重消耗内存。 之前在项目中使用，每次打开小风扇呼呼的转，没一会电脑就可以当暖宝宝了😂后来才发现是Datav的问题。而且边框加载也会出现很多奇奇怪怪的问题。

为了一个边框至此实在不值得，所以今天抽空用纯css撸了九款边框效果，总有一款适合你。 直接看所有效果：

（补上不用放大镜的静态图😏）

1-6款都是常规的边框效果

.item1 {
                border: 8px dotted #99CC00;
                padding-top: 10%;
               
            }
        
            .item2 {
                border: 10px double #FF9999;
                border-radius: 8px;
                padding-top: 10%;
            }
            
            .item3 {
                border: 8px dashed #666699;
                padding-top: 10%;
            }
            .item4 {
                border: 8px ridge #CC9999;
                padding-top: 10%;
            }
            
            .item5 {
                border: 8px inset #2CD5FF;
                padding-top: 10%;
            }
            .item6 {
                border: 8px outset #FF6600; 
                padding-top: 10%;
            }

通过改变border的边框属性，可以实现不同的效果，在此基础上还可以修改border-top、border-bottom，border-left、border-right，单独的给顶宽度和颜色。

从第七号闪烁边框详解，它主要是用到animation动画，给边框加上阴影得到的闪烁效果

.item7 {
                border: 4px solid #FFFF66;
                padding-top: 10%;
                -webkit-animation: twinkling 1s infinite ease-in-out; /*1秒钟的开始结束都慢的无限次动画*/
            }
            @-webkit-keyframes twinkling{	/*透明度由0到1*/
                0% {
                    border-color: #FFFF66;
                    box-shadow: 0 0 10px rgba(0,255,0,.2), inset 0 0 10px rgba(0,255,0,.1), 0 1px 0 #393;
                }
                100% {
                    border-color: #6f6;
                    box-shadow: 0 0 25px rgba(0,255,0,.6), inset 0 0 15px rgba(125, 231, 125, 0.4), 0 1px 0 #6f6;
                }
            }

注意不同浏览器的的兼容性（-webkit、-moz-、-ms-、-o-）

8号边框：其实是视觉上的错觉，以为它是线条滚动效果

<div class="item8"> <div class="content"> 8号滚动线条边框 </div> </div>

 .item8 {
                width: 100%;
                background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgb(228, 161, 85) 3px, rgb(240, 118, 118) 8px);
                animation: shine 1s infinite linear;
                overflow: hidden;
            }
            .content {
                height: 55px;
                margin: 6px;
                padding: 10%;
                background-color: #010629;    
            }
            @-webkit-keyframes shine {
                0% { background-position: -1px -1px;}
                100% { background-position: -12px -12px;}
            }

repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"

CSS语法：

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

先给它设置好重复线性渐变，然后添加animation动画。

9号边框和8号虽然效果上差别很大，但是使用的属性很接近，它使用的是线性渐变：linear-gradient <div class="item9"> <span>title</span> 9号四角高亮边框 </div>

.item9 {
                padding-top: 12%;
                background: linear-gradient(to left, #2CD5FF, #2CD5FF) left top no-repeat,
                linear-gradient(to bottom, #2CD5FF, #2CD5FF) left top no-repeat,
                linear-gradient(to left, #2CD5FF, #2CD5FF) right top no-repeat,
                linear-gradient(to bottom, #2CD5FF, #2CD5FF) right top no-repeat,
                linear-gradient(to left, #2CD5FF, #2CD5FF) left bottom no-repeat,
                linear-gradient(to bottom, #2CD5FF, #2CD5FF) left bottom no-repeat,
                linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat,
                linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat;
                background-size: 4px 20px, 20px 4px, 4px 20px, 20px 4px;
                border: 1px solid #073F97;
                position: relative;
            }
            .item9 span {
                display: inline-block;
                width: 35%;
                background:#05286C;
                font-size: 14px;
                position: absolute;
                top: 0;
                left: 32%;
                padding: 4px 0px;
                color: #19E8FE;
                border-radius: 0 0 10px 10px;

                }

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction ：用角度值指定渐变的方向（或角度）color-stop1：指定渐变的起止颜色

后期项目中实现好看的再补充😁