带有边距的图像内的边框[重复]

Posted 2023-03-06

【中文标题】带有边距的图像内的边框[重复]

【英文标题】：Border inside an image with margin [duplicate]

【发布时间】：2013-09-06 21:26:24

【问题描述】：

如何用 CSS 实现这个效果：

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

【参考方案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;

【参考方案2】：

你只需要一个带有 :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;

【讨论】：

我最终使用了这个的变体。谢谢

【参考方案3】：

在本例中，我会将其设置为background-image，并将其放在外部div、.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;

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

所以 ( 200px 代表 img + 10px 代表顶部和底部 border ) - 20px 顶部和底部 padding = 190px

DEMO

---

更新

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

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

DEMO 2

【讨论】：

我不会将边框的高度设置为 190，而是设置为 100%。你的小提琴看起来有点可疑。 This 似乎分布更好

【参考方案4】：

这是一条大道，小提琴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： 。图片 背景尺寸：封面； 背景重复：不重复； 背景位置：中心中心； 填充：12px； 背景颜色：红色； 文本对齐：居中； 边距：0； .borderbox 边框：1px 实心#fff； 宽度：100%； 高度：100%； 边距：0px； 背景颜色：透明！重要；

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

【参考方案5】：

其他建议似乎更好一些，但可能会在这里发布： 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;