互补网网专做高品质CMS教程,所有教程均为站长亲测有效后发布。
您当前所在位置:互补网首页 > 站长学院 > DIV+CSS教程 >

css3纸张效果代码HTML+CSS

发布时间:2023-11-13热度:0

最终实现效果:

image

html代码:

<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);
}


本文地址:http://www.25923.com/xuexi/divcss/1020169.html(转载请保留)