卡⽚效果htmlcss3，三种CSS实现的卡⽚效果.polaroid {
width:250px;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
text-align:center;
display:inline-block;
background-color:#FFF;
}
.container {
padding:10px;
}
/*⽂字卡⽚*/
.
card {
width:250px;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
text-align:center;
display:inline-block;
background-color:#FFF;
}
.header {
background-color:#4CAF50;
color:white;
padding:10px;
font-size:40px;
css特效文字
}
.container {
padding:10px;
}
/*投影卡⽚*/
#boxshadow {
position:relative;
-moz-box-shadow:1px 2px 4px rgba(0,0,0,0.5);
-webkit-box-shadow:1px 2px 4px rgba(0,0,0,.5);
box-shadow:1px 2px 4px rgba(0,0,0,.5);
padding:10px;
background:white;
width:400px;
}
/* Make the image fit the box */
#boxshadow img {
width:100%;
}
#boxshadow::after {
content:'';
position:absolute;
z-index:-1;
/* hide shadow behind image */
-webkit-box-shadow:0 5px 30px rgba(0,0,0,0.3); -moz-box-shadow:0 5px 30px rgba(0,0,0,0.3); box-shadow:0 5px 30px rgba(0,0,0,0.3);
width:80%;
left:10%;
/* one half of the remaining 30% */
height:100px;
bottom:0;
}
body {
background-color:#999;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。