用div盒子拼出数字100

1.案例需求

灵活运用div盒子拼出一个100。

2.编程思路

首先，弄一个大盒子将其网页居中并给上好看的背景颜色；
然后，弄个小盒子装100，并在大盒子中居中；
再弄四个小盒子拼出一个100

3.案例源码

<div class="frame">
      <div class="center">
        <div class="one-one"></div>
        <div class="one-two"></div>
        <div class="zero-one"></div>
        <div class="zero-two"></div>
      </div>
</div>

<style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .frame {
        width: 400px;
        height: 400px;
        //给个渐变色背景看上去更加漂亮
        background: -webkit-linear-gradient(
          bottom left,
          #43389f 0%,
          #4ec6ca 100%
        );
        //将大盒子网页居中
        position: relative;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: 100px;
        //给盒子加个圆角，看起来没那么突兀
        border-radius: 2px;
        //给盒子加上阴影
        box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
      }
      .frame .center {
        //给小盒子一个设定大小
        width: 200px;
        height: 100px;
        //将位置调整在大盒子中间
        position: absolute;
        top: 50.8%;
        left: 50.5%;
        //transform:translate(水平移动距离，垂直移动距离); 
        transform: translate(-50%, -50%);
      }
      //1的小勾勾
      .frame .center .one-one {
        position: absolute;
        //数字小点让主体将多余的部分覆盖
        z-index: 1;
        width: 20px;
        height: 40px;
        background: #ffffff;
        //做个圆角看起来更光滑
        border-radius: 2px;
        //将小勾勾进行旋转
        transform: rotate(50deg);
        //平移到合适位置
        left: -16px;
        //阴影效果
        box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
      }
      //1的主体
      .frame .center .one-two {
        position: absolute;
        z-index: 10;
        width: 24px;
        height: 100px;
        background: #ffffff;
        //做个圆角看上去更光滑
        border-radius: 2px;
        //阴影效果
        box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
      }
      //两个0
      .frame .center .zero-one,
      .zero-two {
        position: absolute;
        z-index: 5;
        width: 100px;
        height: 100px;
        //将盒子圆角到50%，变成一个圆
        border-radius: 50%;
        //通过调整边框线的粗细，形成一个圆环，即0
        border: 24px solid #fff;
        left: 17px;
        //阴影效果
        box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
      }
      .frame .center .zero-two {
        //使第一个0，压在第二个0上，层次分明
        z-index: 2;
        //调整位置
        left: 100px;
      }
</style>

4.技术细节

• 渐变色做背景，并加上圆角和阴影
• 利用border边框线形成一个圆环的效果
• 灵活运用position