采用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