html 边框效果,纯css实现边框效果（原创）

.box {

width:100px;

height:100px;

border:1px solid #eee;

position:relative;

margin:50px auto;

background-color:rgb(173,151,173);

}

.box1 {

width:100px;

height:100px;

border:1px solid #eee;

position:relative;

margin:50px auto;

background-color:rgb(100,112,106);

}

.box2 {

width:100px;

height:100px;

border:1px solid #eee;

position:relative;

margin:50px auto;

background-color:rgb(208,215,233);

}

.left-to-right-border {

position:absolute;

width:0;

height:1px;

background-color:rgba(98,194,60,0.8);

top:0;

left:0;

bottom:0;

transition:0.5s;

-webkit-transition:0.5s;

-moz-transition:0.5s;

-ms-transition:0.5s;

-o-transition:0.5s;

-webkit-box-shadow:0px -3px 5px rgb(81,221,25);

box-shadow:0px -3px 5px rgb(70,219,11);

}

.right-to-bottom-border {

position:absolute;

width:1px;

height:0px;

background-color:rgba(98,194,60,0.8);

top:0;

right:0;

transition:0.5s;

-webkit-transition:0.5s;

-moz-transition:0.5s;

-ms-transition:0.5s;

-o-transition:0.5s;

-webkit-box-shadow:3px 0px 5px rgb(81,248,15);

box-shadow:3px 0px 5px rgb(71,233,8);

}

.bottom-to-left-border {

position:absolute;

width:0px;

height:1px;

background-color:rgba(98,194,60,0.8);

bottom:0;

right:0;

transition:0.5s;

-webkit-transition:0.5s;

-moz-transition:0.5s;

-ms-transition:0.5s;

-o-transition:0.5s;

-webkit-box-shadow:0px 3px 5px rgb(80,245,14);

box-shadow:0px 3px 5px rgb(73,226,12);

}

.bottom-to-start-border {

position:absolute;

width:1px;

height:0px;

background-color:rgba(98,194,60,0.8);

bottom:0;

left:0;

transition:0.5s;

-webkit-transition:0.5s;

-moz-transition:0.5s;

-ms-transition:0.5s;

-o-transition:0.5s;

-webkit-box-shadow:-3px 0px 5px rgb(78,241,13);

box-shadow:-3px 0px 5px rgb(74,240,8);

}

.box:hover .left-to-right-border {

width:100%;

transition:0.5s;

-webkit-transition:0.5s;

-moz-transition:0.5s;

-ms-transition:0.5s;

-o-transition:0.5s;

}

.box:hover .right-to-bottom-border {

height:100%;

transition:0.5s;

-webkit-transition:0.5s;

-moz-transition:0.5s;

-ms-transition:0.5s;

-o-transition:0.5s;

}

.box:hover .bottom-to-left-border {

width:100%;

transition:0.5s;

-webkit-transition:0.5s;

-moz-transition:0.5s;

-ms-transition:0.5s;

-o-transition:0.5s;

}

.box:hover .bottom-to-start-border {

height:100%;

transition:0.5s;

-webkit-transition:0.5s;

-moz-transition:0.5s;

-ms-transition:0.5s;

-o-transition:0.5s;

}

/* 强大的分割线 */

.box2:hover .left-to-right-border {

width:100%;

-webkit-transition-duration:0.2s;

transition-duration:0.2s;

-webkit-transition-timing-function:linear;

transition-timing-function:linear;

-webkit-transition-delay:0s;

transition-delay:0s;

}

.box2:hover .right-to-bottom-border {

height:100%;

-webkit-transition-duration:0.2s;

transition-duration:0.2s;

-webkit-transition-timing-function:linear;

transition-timing-function:linear;

-webkit-transition-delay:0.2s;

transition-delay:0.2s;

}

.box2:hover .bottom-to-left-border {

width:100%;

-webkit-transition-duration:0.2s;

transition-duration:0.2s;

-webkit-transition-timing-function:linear;

transition-timing-function:linear;

-webkit-transition-delay:0.4s;

transition-delay:0.4s;

}

.box2:hover .bottom-to-start-border {

height:100%;

-webkit-transition-duration:0.2s;

transition-duration:0.2s;

-webkit-transition-timing-function:linear;

transition-timing-function:linear;

-webkit-transition-delay:0.6s;

transition-delay:0.6s;

}