/* 一般样式 */

hr {
  width: 80%;
  margin: 50px auto;
}

/* 简单长度示例 */

#length-simple p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

/* 长度单位示例 */

#length-simple p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

#length-simple p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

#length-simple p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

/* 无单位数字示例 */

#unitless p {
  line-height: 1.5;
}

/* CSS 动画示例 */

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#animation p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

#animation p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

/* 百分比示例 */

#percentage div {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

#percentage div:nth-child(1) {
  background-color: red;
  width: 1300px;
}

#percentage div:nth-child(2) {
  background-color: blue;
  width: 75%;
}

/* 颜色示例 */

/* 与 red 关键字等价 */
#color p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* 与 blue 关键字等价 */
#color p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* 该色彩没有等价关键字 */
#color p:nth-child(3) {
  background-color: rgb(224,176,255);
}

/* 定长区域以放置示例 */

#length-playground .outer {
  width: 100%;
  height: 200px;
  background-color: red;
}

#length-playground .inner {
  width: 550px;
  height: 200px;
  background-color: blue;
}

/* 色彩区域以放置示例 */

#color-playground .first {
  background-color: red;
  width: 400px;
  height: 200px;
  top: 0;
  left: 100px;
}

#color-playground .second {
  background-color: blue;
  width: 200px;
  height: 200px;
  top: -50px;
  left: 125px;
}

#color-playground .third {
  background-color: pink;
  width: 200px;
  height: 300px;
  top: -375px;
  left: 250px;
}

#color-playground div {
  position: relative;
}