css 制作小图标

1. outline 制作方块和加号

outline 不占空间, 像 box-shadow, border-radius 对 outline 不起作用. 可以设置偏移, 当偏移为负值到一定程度, 一个加号就出来了.

div {
    margin: 20px;
}

.stop {
    width: 35px;
    height: 35px;
    border: 1px solid;
    border-radius: 100%;
    outline: 10px solid;
    outline-offset: -21px;
}

.add {
    width: 35px;
    height: 35px;
    border: 1px solid;
    border-radius: 100%;
    outline: 10px solid;
    outline-offset: -27px;
}

.close {
    width: 35px;
    height: 35px;
    border: 1px solid;
    border-radius: 100%;
    outline: 10px solid;
    outline-offset: -27px;
    transform: rotate(45deg);
}

2. 汉堡菜单

• 1. 利用 box-shadow 的多个值

.hamb1 {
    width: 50px;
    height: 0;
    box-shadow: 36px 10px 0 3px, 36px 0 0 3px, 36px 20px 0 3px;
}

• 2. 利用 background-clip: content-box; 结合 padding，　padding 空出来的就是汉堡菜单的空白部分, 中间的杠是利用背景剪裁的内容, 上下的杠是上下边框.

.hamb2 {
    width: 50px;
    height: 5px;
    padding: 5px 0;
    border-top: 5px solid;
    border-bottom: 5px solid;
    background-clip: content-box;
    background-color: black;
}

• 3. 利用渐变函数

.hamb3 {
    width: 50px;
    height: 40px;
    background: linear-gradient(to bottom, black 0%, black 20%, transparent 20%, transparent 40%, black 40%, black 60%, transparent 60%, transparent 80%, black 80%, black 100%);
}

• 4. 利用 background-size 将背景设置小一点, 背景就会平铺, 利用渐变函数和background-size.

.hamb4 {
    width: 50px;
    height: 40px;
    background: linear-gradient(to bottom, black 50%, transparent 50%);
    background-size: 18px;
}

3. 单选按钮

1. 利用 box-shadow.

.radio1 {
    width: 16px;
    height: 16px;
    background: #000;
    border-radius: 100%;
    box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;
}

2. 背景剪裁.

.radio2 {
    width: 16px;
    height: 16px;
    padding: 7px;
    border: 3px solid black;
    border-radius: 100%;
    background-clip: content-box;
    background-color: #000;
    /*must use background-color, background dose't work.*/
}

4. 九方格

这个样式有很多实现方式, 这里放一.

.square {
    margin: 40px;
    width: 0;
    border: 3px solid;
    outline: 6px dotted;
    outline-offset: 6px;
}

5. 下载按钮

.download {
    width: 0;
    border: 8px solid transparent;
    border-top: 8px solid;
    box-shadow: 0 -12px 0 -4px;
}