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 | padding-box | border-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包裹在＆lt; style>标记中，或者更好地使用外部样式表进行样式设置。

Answer 2

试试这个：

<img style="height:75px; width:75px; padding:2px; border:2px solid red">

Answer 3

请尝试以下操作： Demo

img {
    width:75px;
    height:75px;
    outline: 5px solid red
}

更新了 demo

您可以使用Border和border-radius本身，并按预期工作。

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

Answer 4

你需要将它添加到你的CSS

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

Answer 5

<img src="image.jpg" width="75" height="75" style="border: 5px solid red; border-radius: 5px;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;" />

应该做的伎俩

图像宽度之外的Css边框

5 个答案: