html - 如何在不改变大小的 css 中创建边框？

Question

所以我有这段代码:

<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
    text
</h1>

如何制作一个边框，如果我放入较长的文本，我的边框将保持其位置并改变其大小，以使我的文本仍在边框中？谢谢!

Answer 1

只需将 border: 1px solid black (例如)添加到您所拥有的内容中就可以了。 h1 元素会扩大和缩小以适应它的内容，边框也会这样做:

const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";

let index = 0;

setInterval(() => {
  index = (index % sentence.length) + 1;

  result.innerHTML = sentence.slice(0, index);
}, 250);

#result {
  position:absolute;
  top: 10%;
  left: 10%;
  padding: 0 .5rem;
  font-family: Sans-Serif;
  font-size: 2rem;
  line-height: 3rem;
  color: black;
  border: 3px solid black;
  border-radius: 3px;
  min-height: 3rem;
}

<h1 id="result"></h1>

无论如何，我怀疑您可能指的是改变元素尺寸的边框:

#bar1 {
  width: 50%;
  height: 1rem;
  background: red;
  margin: .25rem;
}

#bar2 {
  width: 50%;
  height: 1rem;
  background: cyan;
  margin: .25rem;
  border: 3px solid black;
}

<div id="bar1"></div>
<div id="bar2"></div>

那是因为默认情况下，元素的width 和height 实际上是指定的width 和height 的总和> 属性，加上 padding 加上 border，如上例所示。

如果是这种情况，您有两种选择来保持尺寸与 width 和 height 指定的一样:

• 使用 box-sizing: border-box .这将使填充和边框包含在元素的总宽度和高度中。

• 使用 box-shadow而不是 border。您可以使用 inset 属性将阴影绘制到元素内部而不是外部。

#bar1 {
  width: 50%;
  height: 1rem;
  background: red;
  margin: .25rem;
}

#bar2 {
  width: 50%;
  height: 1rem;
  background: cyan;
  margin: .25rem;
  border: 3px solid black;
  box-sizing: border-box;
}

#bar3 {
  width: 50%;
  height: 1rem;
  background: yellow;
  margin: .25rem;
  box-shadow: inset 0 0 0 3px black;
}

#bar4 {
  width: 50%;
  height: 1rem;
  background: lime;
  margin: .25rem;
  box-shadow: 0 0 0 3px black;
}

<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>

请注意第 4 个条，带有外部 box-shadow 的条看起来更大，但如果您检查它，它的尺寸与其他 3 个条的尺寸完全相同。