css 实现三种不同的图像边框

1，一幅图案或者图像应用为边框（而不是背景）效果图如下：

css代码：

.something{

padding:1em;

border:1em solid transparent;

background:linear-gradient(white,white),url(xunLeiFenShares.png);

background-size:cover;

background-clip:padding-box,border-box;

background-origin: border-box;

}

2，信封样式边框：

 

.envelope{

margin-top:20px;

padding:1em;

border:1em solid transparent;

background:linear-gradient(white,white) padding-box,

repeating-linear-gradient(-45deg,red 0,red 12.5%,

transparent 0,transparent 25%,

#58a 0,#58a 37.5%,

transparent 0,transparent 50%) 0 / 2em 2em;

}

3，动态边框(有动态效果的)

 

.ant{

margin-top:20px;

padding:1em;

border:5px solid transparent;

background:linear-gradient(red,red) padding-box,

repeating-linear-gradient(-45deg,#58a 0,#58a 25%,

yellowgreen 0,yellowgreen 50%) 0 / 3em 3em;

animation:ants 12s linear infinite;

}

 

@keyframes ants{

to {background-position: 100%}

}