使用background多背景与border-radius圆形 - 绘制icon的图标与特别样式的应用

使用css的属性制作一些小众的样式，减少使用对icon图片导入；

使用background多背景实现icon的加减效果

这里应用多背景的属性，书写加减后的图标；代码示例如下：

<style>
.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;
    text-indent: -999px;
}
.btn-sub {
    background-size: .875em 2px, 0;
}
</style>
<button class="btn-add">加</button>
<button class="btn-sub">减</button>

实现的效果如下图所示：

border-radius圆形绘制技巧

1. 实现1/4角标效果示意：
   

关键的css代码如下：

border-bottom-right-radius: 100%;

2. 带尖角对话框小尾巴效果示意
   
   关键的css代码如下：

width: 15px; height: 10px;
border-top: 10px solid;
border-top-left-radius: 80%;

这里是引用《css新世界》一书中的案例