padding+background-clip绘制图形

参考《CSS世界》——张鑫旭

background-clip属性用于描述背景绘制的区域，默认为border-box，还可以取值content-box，padding-box

效果一：移动端经常使用的折叠菜单图标

分析：上下两条使用border-top/bottom实现，中间条利用黑色绘制背景部分。想要背景和border中间有间隙，设置上下padding。默认背景绘制包含padding和border，使用background-clip属性修改背景绘制区域

代码：

.menu{
            width: 14px;
            height: 1px;
            border-top: 2px solid;
            border-bottom: 2px solid;
            /*默认背景绘制部分包含了padding和border部分，设置为只绘制内容 区域*/
            background-clip: content-box;
            padding: 3px 0;
            background-color: black;
        }

效果二：

分析：利用padding将内容和border分开，设置background-clip为内容区域绘制

代码：

   .circle{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: aquamarine;
            background-clip: content-box;
            padding: 3px;
            border: 2px solid aquamarine;
            margin: 20px 100px;
        }