padding 屬性和 background-clip 屬性配合，可以在有限的標簽下實現一些 CSS 圖形繪制效果，我這里舉兩個小例子，重在展示可行性。
例 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>
效果圖：
的問題)
--SpringCloud簡介)
