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

}

 

阅读更多
换一批

没有更多推荐了,返回首页