1.圖片背景邊框
<style>
.box{
position: absolute;
margin: auto;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 5px;
width: 200px;
height: 100px;
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white), url(./1.jpg);
background-size: cover;
background-clip: padding-box,border-box;
background-origin: border-box;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
背景邊框.png
2.老式信封邊框
<style>
.box{
position: absolute;
margin: auto;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 5px;
width: 200px;
height: 100px;
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg,
red 0, red 1em,
transparent 0, transparent 2em,
#58a 0, #58a 3em,
transparent 0, transparent 4em);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
信封邊框.png
3.螞蟻行軍邊框
<style>
.box{
position: absolute;
margin: auto;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 5px;
width: 200px;
height: 100px;
}
@keyframes ants { to { background-position: 100% } }
.marching-ants {
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: ants 12s linear infinite;
}
</style>
</head>
<body>
<div class="box marching-ants">
</div>
</body>
螞蟻行軍邊框.png
