边界能长出来吗？ [复制]

Question

我要解决的一般问题是堆叠框 (<div>) 的对齐，其中一些具有不同的边框宽度。

考虑下面的两个框

.box {
  border-style: solid;
  border-color: green;
  width: 100px;
  height: 100px;
}

.thick {
  border-width: 30px;
}

<div class="box"></div>
<div class="box thick"></div>

它们的大小相同，但边框超出了框的范围，破坏了它们的对齐方式。

我可以用一些技巧来弥补这一点（移动盒子，有一个厚的透明边框，......）但我希望保持总尺寸固定，并“向内”扩大边框。

这可能吗？

Answer 1

也许我不明白你的意思，但如果我明白了，你也许可以用“box-shadow”属性完成你想要的。像这样：

.box {
  border-style: solid;
  border-color: green;
  width: 100px;
  height: 100px;
}

.thick {
  box-shadow: inset 0px 0px 0px 29px green;
}

<div class="box"></div>
<div class="box thick"></div>

Answer 2

有一种方法可以通过使用outline 和outline-offset 规则来完成此操作，如下例所示。

*{
   box-sizing: border-box;
 }

.box {
  border-style: solid;
  border-color: green;
  width: 100px;
  height: 100px;
}

.thick {
   outline: 10px solid red;
   outline-offset: -10px;
}

<div class="box"></div>
<div class="box thick"></div>

编辑 我还强烈建议您始终使用border-box，如 sn-p 所示。这个关于 box-sizing 的documentation 会更详细地解释它。

Answer 3

.box {
  border-style: solid;
  border-color: green;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

.thick {
  border-width: 30px;
  margin-top: 10px;
}

<div class="box"></div>
<div class="box thick"></div>