为图片添加一个花哨的“框架”

Question

有没有人知道如何转换这个相框

进入css box-shadow？
如果有人有想法，请告诉我:)）

Answer 1

将绝对位置放在容器div中。 应用CSS3 2D变换

<div class="container">

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

</div>


.container{
    width: 200px;
        height: 200px;
}


.box1, .box2, .box3{
    border: 1px solid #333;
    height: 150px;
    width: 150px;
    position: absolute;
    top: 10;
    left: 10;
}

.box1{

    transform:rotate(5deg);
-ms-transform:rotate(5deg); /* IE 9 */
-webkit-transform:rotate(5deg); /* Opera, Chrome, and Safari */
}

.box2{

    transform:rotate(-5deg);
-ms-transform:rotate(-5deg); /* IE 9 */
-webkit-transform:rotate(-5deg); /* Opera, Chrome, and Safari */
}

.box3{
    background-color: white;
}

http://jsfiddle.net/dULUp/

修改

使用dropshadow更新了JSfiddle： http://jsfiddle.net/dULUp/1/

编辑2 这是一个过期的编辑，但我一直在回答我已经给出的答案，看看我作为开发人员取得了多大进展。

如果你在Chrome中查看上面带有投影的JSFiddle，你会注意到锯齿状的边缘。

添加了：

/* Added to remove jagged edges */
.container *{
    -webkit-backface-visibility: hidden;
}

参见工作示例： http://jsfiddle.net/dULUp/3/