用css3 linear-gradient 实现边框渐变

先上图…多色边框原理与其相同…

css样式

.box{
     
            position: relative;
            width: 104px;
            height: 184px;
            margin: 0 auto;
        }
        .border{
     
            width: 100px;
            height: 180px;
            border: 2px solid green;
        }
        .animate-line .top{
     
            position: absolute;
            display: inline-block;
            top: 0;
            left: 0;
            height: 2px;
            width: 0;
            background: linear-gradient(to left, red, red);
            transition: all .5s linear;
        }
        .border:hover+.animate-line .top {
     
            width: 102px;
        }
        .animate-line .bottom{
     
            position: absolute;
            display: inline-block;
            bottom: 0;
            left: 0;
            height: 2px;
            width: 0;
            background: linear-gradient(to left, red, red);
            transition: all .5s linear;
        }
        .border:hover+.animate-line .bottom {
     
            width: 104px;
        }
        .animate-line .left{
     
            position: absolute;
            display: inline-block;
            top: 0;
            left: 0;
            width: 2px;
            height: 0;
            background: linear-gradient(to top, red, red);
            transition: all .5s linear;
        }
        .border:hover+.animate-line .left {
     
            height: 182px;
        }
        .animate-line .right{
     
            position: absolute;
            display: inline-block;
            top: 0;
            right: 0;
            width: 2px;
            height: 0;
            background: linear-gradient(to top, red, red);
            transition: all .5s linear;
        }
        .border:hover+.animate-line .right {
     
            height: 183px;
        }

标签

兼容IE10及以上
(第一次插入标签 好麻烦…)