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%}
}