HTML CSS 如何改变边框形状

Question

我正在设计一个网站，对于主标题，我想说的是 "Definitive Apps" 整个边框都与文本相距甚远。

这是我用于边框的代码

#home-banner h1 {
   border-width: 5px;
   border-style: solid;
   text-align:center;
}

然而，这给出了这个结果：

然后我尝试更改宽度，但结果是：

#home-banner h1 {
   border-width: 5px;
   border-style: solid;
   width: 500px;
   text-align:center;
}

我想要页面中央的文本有均匀的边框。这可能吗？

Answer 1

如果您不想定义 width，请使用 display: table。

#home-banner h1 {
   border-width: 5px;
   border-style: solid;
   display: table;
   margin: auto;
   text-align:center;  
   padding: 0 10px;
}

<div id="home-banner">
  <h1>
    Heading 1
  </h1>
</div>

如果宽度固定 (500px)，只需在代码中添加 margin: auto;。

#home-banner h1 {
   border-width: 5px;
   border-style: solid;
   width: 200px;
   margin: auto;
   text-align:center;  
   padding: 0 10px;
}

<div id="home-banner">
  <h1>
    Heading 1
  </h1>
</div>

HTML CSS How to change border shape