background绘图区域

可以看到div1和div2的背景绘图区域不一样，div1是默认的样式，而div2的背景区域明显可以看到是从padding-box开始绘制的，他们的区别就在于background-repeat属性值不同。
要解释这个问题，首先介绍一下几个属性：

background-clip，默认值：border-box
background-origin，默认值：padding-box
background-repeat，默认值：repeat

关于background-repeat，文档中有这样一句：

The image is repeated in this direction as often as needed to cover the background painting area.

另外：
background-origin决定绘图位置(background position area)，background-clip决定绘图区域(background painting area)
所以div1和div2表现不一样的原因在于div1的background-repeat属性为repeat时，的绘图区域从border-box开始

绘制指示箭头

绘制菜单图标

三条线构成的菜单，鼠标放上去时显示x号

绘制心形

标签卡片