第 107 期(W3C标准-CSS-绘制)：占位区块效果 #110
Description
本期展示的是利用 linear-gradient 特性实现的占位区块效果，效果如下：
.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>