css实现邮票剪边相册图片效果代码-html代码-BFW代码库

css实现邮票剪边相册图片效果代码

代码语言：html

所属分类：其他

代码描述：css实现邮票剪边相册图片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        * {
    	box-sizing:border-box;
    	margin:0;
    	padding:0
    }
    body {
    	font-family:Verdana,Geneva,Tahoma,sans-serif;
    	display:flex;
    	justify-content:center;
    	align-items:center;
    	min-height:100vh;
    	background:#f4f4f4;
    	padding:20px
    }
    .container {
    	display:flex;
    	justify-content:center;
    	align-items:center;
    	flex-wrap:wrap
    }
    .container .card {
    	position:relative;
    	width:280px;
    	height:350px;
    	margin:30px
    }
    .container .card:nth-of-type(2) {
    	transform:rotate(5deg)
    }
    .container .card .image {
    	position:relative;
    	width:100%;
    	height:100%;
    	background-size:cover;
    	transform:translate(10px,10px)
    }
    .container .card:before {
    	content:"";
    	position:absolute;
    	top:0;
    	left:0;
    	width:255px;
    	height:325px;
    	border:25px solid #fff;
    	z-index:1;
    	background:linear-gradient(145deg,#fff,#e6e6e6);
    	box-shadow:7px 7px 21px #bdbdbd,-7px -7px 21px #fff;
    	background:transparent
    }
    .container .card:nth-of-type(1)::before {
    	filter:url(#wavy1)
    }
    .container .card:nth-of-type(2)::before {
    	filter:url(#wavy2)
    }
    .container .card:nth-of-type(3)::before {
    	filter:url(#wavy3)
    }
    .image1 {
    	background-image:url("//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png")
    }
    .image2 {
    	background-image:url("//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png")
    }
    .image3 {
    	background-image:url("//repo.bfw.wiki/bfwrepo/image/615cf7a3d9d92.png")
    }
    svg {
    	width:0;
    	height:0
    }
    .container .card .info {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	padding:50px 30px 30px 30px;
    	transform:translate(10px,1.........完整代码请登录后点击上方下载按钮下载查看