利用CSS3的线性渐变linear-gradient制作边框的示例

            height: 200px;     
            position: relative;     
            background: #fff;     
            float: left;     
        }     
     
            .box:before {     
                content: ”;     
                z-index: -1;     
                position: absolute;     
                width: 220px;     
                height: 220px;     
                top: -10px;     
                left: -10px;     
            }     
     
        .first:before {     
            background-image: linear-gradient(90deg, yellow, gold);     
        }     
     
        .second:before {     
            background-image: linear-gradient(0deg, orange, red);     
        }     
     
        .third:before {     
            background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);     
        }