box-shadow实现曲线投影效果

下面是使用box-shadow实现曲线投影的效果，主要原理是多重层叠以及角度的调整。

 

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.curved_box{
    display:inline-block;
    *display:inline;
    width:200px;
    height:246px;
    margin:20px;
    background-color:#fff;
    border:1px solid #eee;
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.06) inset;
    -moz-box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06)inset;
    box-shadow:0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;
    position:relative;
    *zoom:-1;
    }
.curved_box:before{
    -webkit-transform:skew(-15deg) rotate(-6deg);
    -moz-transform:skew(-15deg) rotate(-6deg);
    transform:skew(15deg) rotate(6deg);
    right:15px;
    }
.curved_box:after{
    -webkit-transform:skew(15deg) rotate(6deg);
    -moz-transform:skew(15deg) rotate(6deg);
    transform:skew(15deg) rotate(6deg);
    right:15px;
    }
.curved_box:before,.curved_box:after{
    width:70%;
    height:55%;
    content:' ';
    -webkit-box-shadow:0 8px 16px rgba(1,1,0,0.5);
    -moz-box-shadow:0 8px 16px rgba(1,1,0,0.5);
    box-shadow:0 8px 16px rgba(1,1,0,0.5);
    position:absolute;
    bottom:10px;
    z-index:-1;
    }
</style>

</head>

<body>
<div class="curved_box"></div>
</body>
</html>

 

posted @ 2013-03-15 21:12  Joy Ho  阅读(315)  评论(0)  编辑  收藏  举报