为图片添加精美的“框架”[关闭]答案

【问题标题】：Adding a fancy "frame" to picture [closed]为图片添加精美的“框架”[关闭]
【发布时间】：2015-08-05 22:17:29
【问题描述】：

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

进入 css box-shadow?
如果有人有什么想法请告诉我:)

【问题讨论】：

【解决方案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/

编辑

更新了带有阴影的 JSfiddle： http://jsfiddle.net/dULUp/1/

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

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

添加：

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

查看工作示例： http://jsfiddle.net/dULUp/3/

【讨论】：

谢谢，这很好:)
不客气，祝你的项目好运。