html - CSS 边框超出图像宽度

Question

我想让边框超出图像宽度

让我有 75X75 的图像 现在我在图像上应用 5 px 边框。仍然是 75X75 px。边框放置在图像宽度内。但我希望边框位于图像宽度之外，因此总大小将为 85X85

我试试这段代码

img {
  border: 5px solid red;
  border-radius: 5px
}

<img src="image.jpg" width="75" height="75" />

Answer 1

我相信您正在寻找 box-sizing CSS 属性，

其中设置边框是否包含在所述“框”的大小中的值

它可以设置为:content-box |填充盒 |边框框

div{
  height:100px;
  width:100px;
  background:black;
  border:10px solid gold;
  display:inline-block;
  margin:10px;
  box-shadow:0 0 10px 5px black;
  }
.border-box{
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  }

html,body{
  height:100%;
  background:#222;
  }

<div class="normal"></div>
<div class="border-box"></div>

---

另请注意

使用内联样式被视为不好的做法，因为它会导致进一步的特殊性问题。将您的 css 包装在 <style> 标记中，或者更好地使用外部样式表来进行样式设置。