当前位置：首页 > article >正文

CSS 学习之 padding 与图形绘制

article 2025/2/28 17:07:28

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>