CSS 100 挑战 - Day 001

缘由

网络上看到一个相关的 CSS 编程样式挑战

100dayscss.com/about/

有空就写写吧，巩固基础才是最重要的

0 先看效果吧

1 HTML

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

      <span class="big">Days</span>
      <span class="small">CSS Challenge</span>
    </div>
  </div>

2 CSS

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  height: 400px;
  width: 400px;
  background: #43389f;
  color: #fff;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  background: -webkit-linear-gradient(bottom left, #43389f 0%, #4ec6ca 100%);
  font-family: "Courier New", Courier, sans-serif;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.number {
  position: relative;
  width: 100px;
  height: 100px;
}

.number .one-one {
  position: absolute;
  top: 1;
  z-index: 10;
  left: -16px;
  background: #fff;
  height: 40px;
  width: 20px;
  border-radius: 3px;
  transform: rotate(50deg);
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
}

.one-two {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  height: 100px;
  width: 24px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
}

.zero-one,
.zero-two {
  position: absolute;
  top: 0;
  left: 17px;
  z-index: 8;
  box-sizing: border-box;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  border: 24px solid #fff;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
}
.zero-two {
  z-index: 6;
  left: 100px;
}

.big {
  position: relative;
  z-index: 20px;
  display: block;
  font-size: 82px;
  line-height: 60px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px;
}

.small {
  position: relative;
  z-index: 20;
  display: block;
  font-size: 23px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04rem;
}

不错哦

注意：

1. 数字100的相对层级结构，z-index要设置好
2. text-transform: uppercase; 大写方式
3. 数字0，采用border-radius:50%,加上大border，可以生成