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

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

}

经验分享 程序员 微信小程序 职场和发展