在笔者的个人网站上，有这么一个功能：当页面变得“足够小”（比如手机打开），页面的右上方会变成一个如下的图案：
点击后会触发“下拉框展示”的事件效果。
关键就在这个东西上。使用图片呢？还是矢量图标呢？还是css图形呢？
细想一下：图片——尺寸不好控制、加载慢、易失帧；矢量图标——要引入对应库文件，可能会延迟加载速度；
毫无疑问，最后一个方案是最好的选择！
我们就来说一下CSS图形。这又两种方法实现：
1、padding -> 图形绘制
padding和background-clip配合，可以在有限的标签下实现一些css绘制效果。
- padding？ 内边距——“撑开”content-box
- background-clip—— 这其实是css3属性，其值有3个：border-box、content-box、padding-box（刚开始看前两个时吓了一跳，还以为走错片场了——众所周知，盒模型有“border-box”和“content-box”两种）
其中“ content-box ”这个值就很好玩了：背景剪切内容区域部分 ——忽略padding和border“间隙”。（此属性另一个值border-box正好相反：将背景延伸到border外边缘，大家有兴趣可以用dotted的border试一下）
.icon{
display: inline-block;
width: 140px;
height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
} 总的来说就是：以一条
width: 10px
的横线为“中心”，找一个上border和一个下border，在padding下“拉开距离”。
但为何用 inline-block ？是偶然吗？
事实上，对于内联元素，业界有一个“流传已久”的 误解 ：内联元素的padding只影响水平方向，不会作用于垂直方向。
这是不准确的。
内联元素 的padding在垂直方向上的确也会影响布局（影响视觉表现）。只是因为内联元素没有可视宽、高一说 —— clientHeight & clientWidth 永远为0；垂直方向行为完全受inline-height和vertical-align影响 ，视觉上并没有改变上下两行内容间距，也就导致了我们会有“垂直padding不起作用”的感觉。
但是如果我们给内联元素加个背景色 or 边框，自然就可以看到其尺寸空间确实是受padding影响了。
那内联padding在实际开发中有何用？
最重要的一点：我们可以在不影响当前（整体）布局的情况下，“优雅地”增加链接或按钮的点击区域大小。（摆脱文字链接的font-size控制）
——这尤其体现在移动端，比如：微信小程序这种“小屏应用”页面中。
内联元素是指行元素（inline）。而以上说法在“块元素（block）”中就显得“多余而且一无是处”；所以，inline-block 这个“综合体”也同样会“破坏”布局——padding行间距！
2、border-style:double
border-style:double; 经常被用来实现一些等宽的图形效果。
比如本例：
.icon-menu{
width: 140px;
height: 20px;
border-top: 60px double;
border-bottom: 20px solid;
} 代码中的数值可不是随便设置的：
double属性值——“透明”双线条框
| 值 | 表现规则 | 效果预览（自行演示） |
| 1px | 0+1+0 | 暂无 |
| 2px | 1+0+1 | 暂无 |
| 3px | 1+1+1 | 暂无 |
| 4px | 1+2+1 | 暂无 |
| 5px | 2+1+2 | 暂无 |
| 6px | 2+2+2 | 暂无 |
| 7px | 2+3+2 | 暂无 |
通俗来说，就是：两条线，中间是空的；这三部分共同构成“边框”。
