css 绘制图标——实现加减按钮_html

<button class="btn-add">加</button>
<button class="btn-sub">减</button>
.btn-add,
.btn-sub {
    width: 1.5rem; height: 1.5rem;
    border: 1px solid gray;
    background: linear-gradient(currentColor, currentColor) no-repeat center/.875em 2px, 
                linear-gradient(currentColor, currentColor) no-repeat center/2px .875em,
                ghostwhite;
    color: dimgray;
}
.btn-sub {
    background-size: .875em 2px, 0;
}

效果见链接
​​​https://demo.cssworld.cn/new/3/10-4.php​​

原理解析

background支持多背景，通过渐变linear-gradient()函数，可以模拟出任意像素点，从而实现任意图像效果。