3

如何使用 CSS 实现这种效果：

我是否需要一个带有边距和边框的较小 Div，或者这是否可以使用 box-shadow

4

5 回答 5

7

您只需要一个带有 :before 或 :after 的元素，这完全取决于您

演示：http: //jsfiddle.net/6a95A/1/

标记：

<figure></figure>

在此处输入图像描述

样式

figure{
    width:200px;
    height: 180px;
    position:relative;
    background-image:url(http://24.media.tumblr.com/tumblr_m2scelXYGA1qbmtexo1_500.jpg);
    background-size:cover;
    background-position:50%;
}
figure:before{
    content:'';
    position: absolute;
    left: 2%;
    top: 2%;
    width: 95%;
    height: 95%;
    border: 1px solid white;
}
于 2013-09-03T15:57:00.073 回答
2

在此示例中，我会将其设置为 abackground-image并将其放置在 externaldiv中.img。然后添加padding.

HTML

<div class="img">
    <div class="border"></div>
</div>

然后在这个例子中添加一个div提供边框的内部。.border

CSS

.img {
    width: 400px;
    height: 200px;
    padding: 10px;
    background-image: url('http://www.lorempixel.com/400/200');
}
.border {
    border: 5px solid red;
    height: 190px;
}

注意：height的.border包括5px每个顶部和底部的border。

所以（ 200px对于顶部和底部的+ img ） -对于顶部和底部=10pxborder 20pxpadding190px

演示

更新

如果您想要%值而不是固定值，则可以将 CSS 修改.border { .. }为：

.border {
    height:100%;
    width:100%;
    border: 5px solid red;
    box-sizing: border-box;
}

演示 2

于 2013-09-03T15:36:15.467 回答
1

我认为它不适用于盒子阴影，可能是这样的：

http://jsfiddle.net/HgxbM/

<div class="wrap">
    <img src="http://i.stack.imgur.com/1aYLD.jpg" />
    <span class="border"></span>
</div>

CSS：

.wrap {
    position:relative;
    width:302px;
    height:187px;
}
.border {
    position:absolute;
    top:10px;
    left:10px;
    width:90%;
    height:90%;
    display:block;
    border:solid 1px red;
}

或使用CSS calc() http://jsfiddle.net/HgxbM/4/

.border {
    position:absolute;
    top:0px;
    left:0px;
    margin:15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    display:block;
    border:solid 1px red;

}
于 2013-09-03T15:37:58.897 回答
0

这是一种途径，小提琴http://jsfiddle.net/Lpssz/1/ HTML：

<div class="picture" 
     style="background-image: url(YourPicture.jpg); height: 200px; width: 200px;">
<div class="borderbox"></div>
</div>

而 CSS: .picture { background-size: cover; 背景重复：不重复；背景位置：中心中心；填充：12px；背景颜色：红色；文本对齐：居中；边距：0；} .borderbox { 边框：1px 实心 #fff; 宽度：100%；高度：100%；边距：0px；背景颜色：透明！重要；}

有了这个，您将图像应用为 div 的背景元素，然后在创建内部边框的“图像 div”中创建一个额外的 div。“图像 div”通过使用其填充属性来格式化边框的位置，并且内部边框 div 正在拉伸以填充其余空间。

于 2013-09-03T15:52:30.007 回答
0

其他建议似乎更好一些，但可能只是在这里发布：http: //jsfiddle.net/HbcRp/1/

HTML：

<div class="image">
    <div class="border">
    </div>
</div>

CSS（注意：背景色仅用于演示）：

.image {
    background-color:rgba(0,0,0,0.8);
    width:300px;
    height:150px;
    position:absolute;
    margin:none;
    padding:none;
}
.border {
    border: solid white 1px;
    height:110px;
    width:260px;
    margin:20px auto auto auto;
    position:relative;
    padding:none;
}
于 2013-09-03T15:43:25.470 回答