谢谢！

Question

我谦卑地来到你的大脑，因为我的小脑子并没有参与这个大脑。

我需要对图像的所有4个边进行提升角落效果。

我找到了3种不同的方法来完成抬起的角落：

.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 { 
    bottom: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>

具有线性渐变和旋转 http://cssdeck.com/labs/page-curl-box-shadow

带有框阴影和歪斜 http://www.readitsideways.com/css3_demos/shadows/

偏斜示例似乎在变焦时比旋转变形更多。可能有一种比其他方法更清洁的方法吗？

所有的例子只显示了影响的两个方面 - 我努力尝试添加另外两个方面似乎取消了原来的两个方面。我也没有成功将样式直接应用于图像，尽管这可能是填充或边距问题。

我的问题：

这可以在4方面完成吗？

两个div，一个div嵌套并堆叠在另一个div上，图像在内部div中？

或者，可以用一个div和一个图像来完成吗？

我很感激任何帮助，因为我完全是漂泊。

谢谢！

更新12/1

@Vals

感谢您的贡献！有这么多不同的方法来获得类似的结果！我在上面发布了3种方法，然后发现第4种方法使用了盒子阴影和线性渐变，没有旋转或倾斜：

http://cjwainwright.co.uk/webdev/liftedcorners/

你使用盒子阴影和变换，我称之为方法＃5。我注意到这包括两侧，顶部和底部，我正在寻求一个4方解决方案。

我收到了一个四面解决方案（＃6），它使用了盒子阴影并且用跨度旋转，而不是来自WW列表的Danny Williams： http://codepen.io/dsongman/pen/PPMdpb?editors=110

Answer 1

我不确定这是否重复，有很多例子。

但是我没有看到任何四个角落，所以这是我的解决方案

＆＃13;

.test {
    width: 700px;
    height: 300px;
    margin: 50px;
    position: relative;
  background-color: lightgreen;
}


.test:before {
    content: "";
    position: absolute;
    width: 30%;
    height: 96%;
    top: 2%;
    left: 40px;
    transform: perspective(500px) rotateY(10deg);
    transform-origin: left center;
    box-shadow: 0px 0px 30px 10px black;
    z-index: -1;
}

.test:after {
    content: "";
    position: absolute;
    width: 30%;
    height: 96%;
    top: 2%;
    right: 40px;
    transform: perspective(500px) rotateY(-10deg);
    transform-origin: right center;
    box-shadow: 0px 0px 30px 10px black;
    z-index: -1;
}

＆＃13;

<div class="test"></div>

＆＃13;

CSS在四个方面都提升了角落？

谢谢！

1 个答案: