@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.border-bottomleft {    position: relative;}.border::before,.border-top::before,.border-right::before,.border-bottom::before,.border-left::before,.border-topbottom::before,.border-topbottom::after,.border-rightleft::before,.border-rightleft::after,.border-topleft::before,.border-topleft::after,.border-rightbottom::before,.border-rightbottom::after,.border-topright::before,.border-topright::after,.border-bottomleft::before,.border-bottomleft::after {    content: "\0020";    overflow: hidden;    position: absolute;}/* border * 因，边框是由伪元素区域遮盖在父级 * 故，子级若有交互，需要对子级设置 * 定位 及 z轴 */.border::before {    box-sizing: border-box;    top: 0;    left: 0;    height: 100%;    width: 100%;    border: 1px solid #eaeaea;    transform-origin: 0 0;}.border-top::before,.border-bottom::before,.border-topbottom::before,.border-topbottom::after,.border-topleft::before,.border-rightbottom::after,.border-topright::before,.border-bottomleft::before {    left: 0;    width: 100%;    height: 1px;}.border-right::before,.border-left::before,.border-rightleft::before,.border-rightleft::after,.border-topleft::after,.border-rightbottom::before,.border-topright::after,.border-bottomleft::after {    top: 0;    width: 1px;    height: 100%;}.border-top::before,.border-topbottom::before,.border-topleft::before,.border-topright::before {    border-top: 1px solid #eaeaea;    transform-origin: 0 0;}.border-right::before,.border-rightbottom::before,.border-rightleft::before,.border-topright::after {    border-right: 1px solid #eaeaea;    transform-origin: 100% 0;}.border-bottom::before,.border-topbottom::after,.border-rightbottom::after,.border-bottomleft::before {    border-bottom: 1px solid #eaeaea;    transform-origin: 0 100%;}.border-left::before,.border-topleft::after,.border-rightleft::after,.border-bottomleft::after {    border-left: 1px solid #eaeaea;    transform-origin: 0 0;}.border-top::before,.border-topbottom::before,.border-topleft::before,.border-topright::before {    top: 0;}.border-right::before,.border-rightleft::after,.border-rightbottom::before,.border-topright::after {    right: 0;}.border-bottom::before,.border-topbottom::after,.border-rightbottom::after,.border-bottomleft::after {    bottom: 0;}.border-left::before,.border-rightleft::before,.border-topleft::after,.border-bottomleft::before {    left: 0;}@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {    /* 默认值，无需重置 */}@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {    .border::before {        width: 200%;        height: 200%;        transform: scale(.5);    }    .border-top::before,    .border-bottom::before,    .border-topbottom::before,    .border-topbottom::after,    .border-topleft::before,    .border-rightbottom::after,    .border-topright::before,    .border-bottomleft::before {        transform: scaleY(.5);    }    .border-right::before,    .border-left::before,    .border-rightleft::before,    .border-rightleft::after,    .border-topleft::after,    .border-rightbottom::before,    .border-topright::after,    .border-bottomleft::after {        transform: scaleX(.5);    }}@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {    .border::before {        width: 300%;        height: 300%;        transform: scale(.33333);    }    .border-top::before,    .border-bottom::before,    .border-topbottom::before,    .border-topbottom::after,    .border-topleft::before,    .border-rightbottom::after,    .border-topright::before,    .border-bottomleft::before {        transform: scaleY(.33333);    }    .border-right::before,    .border-left::before,    .border-rightleft::before,    .border-rightleft::after,    .border-topleft::after,    .border-rightbottom::before,    .border-topright::after,    .border-bottomleft::after {        transform: scaleX(.33333);    }}复制代码

使用时注意：该class名字只作用于(display:block)的块级元素上,其它看不到效果

想改变边框颜色的话，将代码中的所有颜色统一全部替换成你需要的颜色

将以下代码放在border.css文件中，然后引入