第 107 期(W3C标准-CSS-绘制)：占位区块效果

[wingmeng]

本期展示的是利用 linear-gradient 特性实现的占位区块效果，效果如下：

> 在线 Demo <

.main {
  max-width: 960px;
  margin: 0 auto;
}

.side {
  float: right;
  width: 300px;
}

.cont {margin-right: 320px;}

.box {
  min-height: 100px;
  border-width: 2px;
}

.box + .box {margin-top: 20px;}

.box.primary {
  background-color: #e3f1dd;
  background-image:
    linear-gradient(rgba(255, 255, 255, .8) 2px, transparent 0),
    linear-gradient(90deg, rgba(255, 255, 255, .8) 2px, transparent 0);
  background-size: 20px 20px;
  border-style: dashed;
  border-color: #70be4a;
}

.box.normal {
  background-color: #f1f1f1;
  background-image: linear-gradient(transparent 50%, #e5e5e5 50%);
  background-size: 100% 10px;
  border-style: solid;
  border-color: #c4cbce;
}

<div class="main">
  <div class="side">
    <div class="box normal" style="height:256px"></div>
    <div class="box primary"></div>
    <div class="box primary"></div>
  </div>
  <div class="cont">
    <div class="box primary"></div>
    <div class="box normal" style="height:380px"></div>
  </div>
</div>