Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

三种CSS实现的卡片效果

0