Jquery 带有背景边框的HTML CSS图像

如何使用css创建如下链接所示的边框。

---

您可以创建

背景图像

并将图像放入

或

使用不同的

z索引创建一些矩形div

。 使用此css属性后，在每个矩形分区上旋转

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

---

这个网站上的例子：

这是一种错觉。并不是每一张图片都有这个边框，他们只是有一个带有边框的背景图片，他们把所有内容都放在里面。

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

样本：

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