18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

网站建设之纸张背景

2019-12-23 分享

效果展示

苏州网站建设之纸张背景

页面

<div class="paper"></div>
    <div class="paper"></div>
    <div class="paper"></div>
    <div class="paper"></div>

CSS

.paper {
	position:relative;
	width:200px;
	height:250px;
	background:#fff;
	border:1px solid #eee;
	float:left;
	margin:10px;
	box-shadow:0 0 5px rgba(0,0,0,0.27),0 0 20px  rgba(0,0,0,.1) inset;
}
.paper::after,.paper::before {
	content:'';
	position:absolute;
	bottom:6px;
	width:100px;
	height:1px;
	z-index:-1;
	box-shadow:0 2px 12px 5px rgba(0,0,0,.3);
}
.paper::after {
	left:4px;
	transform:rotate(-6deg);
}
.paper::before {
	right:4px;
	transform:rotate(6deg);
}
 
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图