css 如何讓文字標題顯示在邊框上？

如圖，如何讓文字標題顯示在邊框上？

如果需要更精確的擴展，fieldset的效果不好，還自己實現一個吧，如下：

 

<style>
    .box{
        position:relative;
        border:1px solid red;
    }
    .box::before{
        content:attr(title);
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        -webkit-transform:translate(-50%,-50%);
        padding:0 10px;
        background-color:#fff;
    }
</style>
<div class="box" title="使用方法">
    <ol>
        <li>這是啥</li>
        <li>干啥</li>
    </ol>
</div>

 

不太建議使用fieldset，一般都會被reset的

 <fieldset>
    <legend>【使用方法】</legend>
  </fieldset>

　

提供一種hacked方法：

style:

  div {
    width: 400px;
    height: 200px;
    border: 1px solid #ccc;
  }
  div h1 {
    height: 20px;
    margin: -10px auto 0;
    font-size: 14px;
    padding: 0 10px;
    text-align: center;
    width: 50px;
  }

html:

  <div>
    <h1>嘿嘿嘿</h1>
  </div>

 

 

<style>
    h2:before, h2:after {
        content: "";
        display: inline-block;
        vertical-align:middle;
        width: 100px;
        border-top: 1px solid #123456;
    }
</style>

<h2>線標題</h2>

 

設置position為relative，top為-1em 既可設置位置。

background-color為背景色，padding左右0.5em。
其實就是用背景色遮蓋邊框顏色。