css特效——纯css绘制图标：带框的加号（添加按钮）、三横（三道杠）、带圈点（双层圆点）

带框的加号（添加按钮）

 

鼠标悬浮时会高亮

<template>
    <div style="padding: 20px">
        <div class="add"></div>
    </div>
</template>
<style scoped>
    .add {
        display: inline-block;
        width: 76px; height: 76px;
        color: #ccc;
        border: 2px dashed;
        transition: color .25s;
        position: relative;
        overflow: hidden;
    }
    .add:hover {
        color: #34538b;
    }
    .add::before, .add::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .add::before {
        width: 20px;
        border-top: 4px solid;
        margin: -2px 0 0 -10px;
    }
    .add::after {
        height: 20px;
        border-left: 4px solid;
        margin: -10px 0 0 -2px;
    }
</style>

三横（三道杠）

<template>
    <div>
        <div class="icon-menu"></div>
    </div>
</template>
<style scoped>
    .icon-menu {
        width: 10px;
        height: 2px;
        border-top: 6px double;
        border-bottom: 2px solid;
    }
</style>

或

<template>
    <div>
        <i class="icon-menu"></i>
    </div>
</template>
<style scoped>
    .icon-menu {
        display: inline-block;
        width: 16px;
        height: 2px;
        padding: 4px 0;
        border-top: 2px solid;
        border-bottom: 2px solid;
        background-color: currentColor;
        background-clip: content-box;
    }
</style>

带圈点（双层圆点） 

<template>
    <div>
        <i class="icon-dot"></i>
    </div>
</template>
<style scoped>
    .icon-dot {
        display: inline-block;
        width: 16px;
        height: 16px;
        padding: 4px;
        border: 4px solid;
        border-radius: 50%;
        background-color: currentColor;
        background-clip: content-box;
    }
</style>