Question

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

Answer 1

您可以创建background-image并将图片放入。

或

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

-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);
}

带有背景边框的HTML CSS图像

3 个答案: