CSS 学习之 padding 与图形绘制

padding 属性和 background-clip 属性配合，可以在有限的标签下实现一些 CSS 图形绘制效果，我这里举两个小例子，重在展示可行性。

例 1:不使用伪元素，仅一层标签实现大队长的“三道杠”分类图标效果。此效果在移动端比较常见，类似于图 1 最右边的小图标。
图 1 “三道杠”小图标示意

图 1 “三道杠”小图标示意

我们可以使用类似下面的 CSS 代码(10 倍大小模拟)实现:

    .icon-menu {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;}

例 2:不使用伪元素，仅一层标签实现双层圆点效果。此效果在移动端也比较常见，类似于图 2，在多个广告图片切换时，用来标识当前显示的是哪张图。

图 2 双层圆点图形示意

我们可以使用类似下面的 CSS 代码(10 倍大小模拟)实现:

    .icon-dot {display: inline-block;width: 100px; height: 100px;padding: 10px;border: 10px solid;border-radius: 50%;background-color: currentColor;background-clip: content-box;}

完整代码：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.icon-menu {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;}.icon-dot {display: inline-block;width: 100px;height: 100px;padding: 10px;border: 10px solid;border-radius: 50%;background-color: currentColor;background-clip: content-box;}</style></head><body><i class="icon-menu"></i><i class="icon-dot"></i></body>
</html>