采用html+css繪制多層方章及圓章

  多層方章及圓章也是日常生活及工作中常用的印章，所謂多層方章是指在印章内容用橫線劃分多個區域以顯示不同内容，如姓名、日期等，而圓章則是印章邊框為圓形，且内容水準居中顯示（有沿着邊框弧形分布顯示的，暫時不清楚怎麼用html和css展示，本文僅列出最簡單的形式），多層方章及圓章的示例如下所示：

  将上篇文章的廢棄章改為圓章，最重要的屬性為border-radius，該屬性支援按百分比指派，百分之百的話則為圓章，同時如果width和height相同時為圓章，width和height不同時為橢圓章。參照參考文獻2設定文本水準和垂直居中，最重要的屬性包括display、vertical-align。完整的示例代碼如下所示，可以在codepen網站線上測試。

.border1{
    position: absolute;
    left: 50px;
    top: 50px;
    width: 90px;
    height:90px;
    border: 6px solid red;
    border-radius:100%;
    text-align: center;
}

.border2{
    position: relative;
    left: 3px;
    top: 3px;
    width: 80px;
    height:80px;
    border: 3px solid red;
    border-radius:100%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

#content{
  color : red;
  font-size:30px;
  font-weight:bold;
  font-family: 楷體;
  margin: 0 auto;
  display: table;
}
<div class="border1">
  <div class="border2">
    <span id="content">廢棄</span>   
  </div>
</div>
           

  多層方章的思路是最外面有一個大的div，然後裡面有幾層就對應幾個子div，每個子div中再包含文本。子div的高度約等于大div的1/n（網上有的是用線條分隔，我這裡是犯懶了，直接用div分隔，分隔線直接用的div的邊框線）。完整的示例代碼如下所示，可以在codepen網站線上測試。

.border{
    position: absolute;
    left: 50px;
    top: 50px;
    width: 96px;
    height: 100px;
    border: 4px solid red;
    border-radius:10%;
}

.level{
    position: relative;
    width: 96px;
    height: 33px;
    border: 1px solid red;
}

#content{
  color : red;
  font-size:20px;
  font-weight:bold;
  font-family: 楷體;
  margin: 0 auto;
  display: table;
}

<div class="border">
  <div class="level">
   <span id="content">張  三</span> 
  </div>
  <div class="level">
   <span id="content">二零二三</span> 
  </div>
   <div class="level">
   <span id="content">第一批</span> 
  </div>
</div>
           

  由于對html和css的了解還處于初級階段，繪制多層方章及圓章也是基于網上的文章及個人了解完成的，處理的比較粗糙，後續還會繼續學習html+css的用法。

參考文獻：

[1]https://codepen.io/

[2]https://www.cnblogs.com/HtmlDuck/p/16258806.html