border-right: 48px solid #237449;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
}
比起蜡笔笔杆，笔头看起来有点平，我们可以使用
:after伪类元素来修复这个问题。我添加一个从顶部到底部的
linear-gradient，制作了一个反光效果，贯穿整只蜡笔。
复制代码
div:after {
background-image: linear-gradient(to bottom,
white(0) 12px,
white(.2) 17px,
white(.2) 19px,
white(0) 24px);
}
这给那个扁平的三角形添加更多的层次感，更加真实。制作接近尾声，我给
:after添加一些文字，定位，使得看起来像是印刷在蜡笔包装上的一样。
复制代码
div:after {
content: ‘green’;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: black(.3);
text-align: right;
padding-right: 47px;
padding-top: 17px;
}
大功告成！
另外一个实例
蜡笔作为一个不错的例子，很好地展示了如何使用
background-image和
gradient来产生真实的效果。下面这个例子将展示多个
box-shadow的强大之处：单
div的照相机。这是照相机的主体部分，使用
background-image和
border-image制作的。
下面是一张 gif，展示
:before伪类元素（黑色的那个矩形），以及使用它的
box-shadow创建出来的很多照相机的细节部分。
复制代码
div:before {
background: #333;
box-shadow: 0 0 0 2px #eee,
-1px -1px 1px 3px #333,
-95px 6px 0 0 #ccc,
30px 3px 0 12px #ccc,
-18px 37px 0 46px #ccc,
-96px -6px 0 -6px #555,
-96px -9px 0 -6px #ddd,
-155px -10px 1px 3px #888,
-165px -10px 1px 3px #999,
-170px -10px 1px 3px #666,
-162px -8px 0 5px #555,
85px -4px 1px -3px #ccc,
79px -4px 1px -3px #888,
82px 1px 0 -4px #555;
}
类似的，下面是
:after（灰色的圆）以及使用它的
box-shadow制作的几个细节部分。
