Html
    Css
    Js

    
                        
/*-----背景-----*/
.box {
	width:200px;
	height:100px;
	background:repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 30px);
}
/*-----边框-----*/
@keyframes line {
	to {
	background-position:100%;
}
}.box1 {
	width:200px;
	height:100px;
	padding:1em;
	border:1px solid transparent;
	background:linear-gradient(white,white) padding-box,repeating-linear-gradient(
                -45deg,black 0,black 25%,white 0,white 50%
                ) 0 / .6em .6em;
	animation:line 12s linear infinite;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css3制作背景、边框

此效果运用css3的渐变效果来实现的

1