CSS3制作带阴影的纸片效果
效果如图：
代码如下：
<html>
<head>
<title>CSS3制作带阴影的纸片效果 </title>
<style type="text/css">
body { font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; font-size : 13px ; background : #3a6682 ; margin : 0px ; padding : 0px ;}
article { width : 50% ; background : #fbf8f1 ; -webkit-border-radius:5px; padding : 1.5em ; color : rgba(0,0,0,.8) ; text-shadow : 0px 1px 0px #fff ; position : absolute ; left : 25% ; top : 25% ; z-index : 999 ; line-height : 1.5em ; text-align : center ;}
article>*:first-child { position : static ;}
article>*:last-child { margin-bottom : 0px ; !important}
article:after { display : bolck ; content : "" ; width : 100% ; height : 20% ; background-color : rgba(0,0,0,.3) ; opacity:1; position : absolute ; bottom : 15px ; left : 0px ; width : 98% ; margin-left : 1% ; -webkit-box-shadow: 0px 0px 30px rgba(0,0,0,.7); -webkit-transform:rotate(-4deg); z-index : 5 ;}
article:before { display : bolck ; content : "" ; width : 100% ; height : 20% ; background-color : rgba(0,0,0,.3) ; opacity:1; position : absolute ; bottom : 15px ; left : 0px ; width : 98% ; margin-left : 1% ; -webkit-box-shadow: 0px 0px 30px rgba(0,0,0,.7); -webkit-transform:rotate(4deg); z-index : 5 ;}
article>*:first-child>* { position : relative ; z-index : 99 ;}
article>*:first-child:after { display : block ; content : "" ; -webkit-border-radius:5px; -webkit-box-shadow:0px 2px 10px rgba(0,0,0,.3); border : 1px solid #fff ; position : absolute ; width : 100% ; height : 100% ; background : #e8eaed ; opacity:1; top : 0px ; left : 0px ; z-index : 55 ;}
article >* { z-index : 99 ; position : relative ;}
</style>
</head>
<body>
<article>
<header>
<h1>CSS3 带阴影的纸片效果</h1>
</header>
<p>不使用任何额外的标记实现阴影纸片效果。例子里只以webkit内核的浏览器作为测试环境，firefox，opera等浏览器大家可以自己添加。HTML5新语义标签，配合CSS3样式，不支持IE8及以下浏览器。</p>
</article>
</body>
</html>
浙公网安备 33010602011771号