Question

参考来自Best way to do this kind of drop shadow?

的css效果

如何（如果有的话）也可以在图像顶部应用相同的效果？

Answer 1

尝试

body {
    padding:20px 0 30px;
    font:14px/1.5 Arial, sans-serif;
    text-align:center;
    color:#333;
    background:#FAF0D9;
}

.drop-shadow {
    position:relative;
    float:left;
    width:40%;    
    padding:1em; 
    margin:2em 10px 4em; 
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute; 
    z-index:-2;
}

.drop-shadow p {
    font-size:16px;
    font-weight:bold;
}

/* Lifted corners */

.lifted {
    -moz-border-radius:4px; 
         border-radius:4px;
}

.lifted:before,
.lifted:after { 
    top:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    -webkit-box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7);   
       -moz-box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7);
       -webkit-transform:rotate(3deg);   
       -moz-transform:rotate(3deg);  
        -ms-transform:rotate(3deg);  
         -o-transform:rotate(3deg);
            transform:rotate(3deg);

}

.lifted:after {
    right:10px; 
    left:auto;
 -webkit-transform:rotate(-3deg);    
       -moz-transform:rotate(-3deg);   
        -ms-transform:rotate(-3deg);   
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}


<div class="drop-shadow lifted">
    <p>Lifted corners</p>
</div>

Answer 2

您可以在顶部对齐png阴影放置另一个div，或者您可以使用CSS多个背景（不适用于所有浏览器）

页面卷曲阴影也在顶部？

2 个答案: