通过css四个角边框的实现

边框的实现"/>

通过css四个角边框的实现

想要实现的效果

现在只有四个角，而想要实现整个边框的绘制，所需部分重要css代码如下，可供参考

.Border{position: relative;background-image: url(../../Images/border/lt.png),url(../../Images/border/rt.png),url(../../Images/border/ld.png),url(../../Images/border/rd.png);background-size: 3.5em;background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: top left, top right, bottom left, bottom right; }

.Border:before{content: "";width: calc(100% - 6.5em);//计算所需中间边框的宽度height: 100%;position: absolute;bottom: 0;top:0;left:3em;border-bottom: 2px solid #3997b1;border-top: 2px solid #3997b1;
}
.Border:after{content: "";width: 100%;height: calc(100% - 6.5em);//计算所需中间边框的高度position: absolute;left: 0px;right:0px;top:3em;border-left: 2px solid #3997b1;border-right: 2px solid #3997b1;
}