jquery - 带有背景边框的 HTML CSS 图像

Question

如何使用 css 创建如下链接所示的边框。 http://themeforest.net/item/midway-responsive-travel-wp-theme/full_screen_preview/3559006?ref=magazinehive

Answer 1

您可以创建一个background-image并将您的图像放入。

或者

创建一些不同的矩形 div z-index。rotate在每个矩形 div 上使用此 css 属性后。

-moz-transform:rotate(-10deg); //firefox
-webkit-transform:rotate(-10deg); //Chrome, Safari
-o-transform:rotate(-10deg); //Opera

本网站示例：http: //inspectelement.com/tutorials/create-the-illusion-of-stacked-elements-with-css3-pseudo-elements/

Answer 2

那是一种错觉。不是每张图片都有这个框架，他们只是得到一个带有该边框的背景图像，然后他们将所有内容都放在其中。

Answer 3

您可以使用 FireBug 或 Chrome 的开发者工具来了解他们是如何实现这一目标的。他们所做的是创建多个 div 并使用 CSS 变换以不同程度旋转 div 以创建效果。

示例：http: //jsfiddle.net/ChbP7/

HTML 代码：

<div style="padding: 20px;">
    <div class="main-slider-container fade-slider-container">
        <div class="fade-slider main-slider fade-effect">
            <div style="background-color: #EEE; height: 100px;"></div>
        </div>
        <div class="block-background layer-1"></div>
        <div class="block-background layer-2"></div>
    </div>
</div>

CSS：

.main-slider {
    border: 10px solid #fff;
    overflow: hidden;
}

.main-slider-container .block-background {
    position: absolute;
    background: #fff;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.fade-slider {
    position: relative;
    z-index: 5;
}

.fade-slider-container {
    position: relative;
}

.main-slider,
.fade-slider-container .block-background {
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.fade-slider-container .layer-1 {
    -ms-transform: rotate(1.2deg);
    -webkit-transform: rotate(1.2deg);
    -o-transform: rotate(1.2deg);
    -moz-transform: rotate(1.2deg);
    transform: rotate(1.2deg);
}

.fade-slider-container .layer-2 {
    -ms-transform: rotate(-1.8deg);
    -webkit-transform: rotate(-1.8deg);
    -o-transform: rotate(-1.8deg);
    -moz-transform: rotate(-1.8deg);
    transform: rotate(-1.8deg);
}