用CSS来制作图标-CSDN博客

想知道如何利用CSS来制作图标吗？并且只使用一个标签的情况下，不能使用伪元素哦！

在利用CSS制作图标时，经常用到border边框，所以，先看看边框的相关知识。

1.藏在border中的不能说的秘密

<style>
    .box{
        width:100px;
        height:100px;
        border-top:10px solid red;
        border-right:10px solid blue;
        border-bottom:10px solid yellow;
        border-left:10px solid green;
    }
</style>
<body>
    <div class="box"></div>
</body>
复制代码

运行结果如下：

从运行结果可以看出，每个边框是个梯形，那么我们把宽度和高度都设置为0，会怎么样呐？

从上图中，可以看出，四个边框都变成了三角形，那么如果将左，右，下的边框都设置为透明(transparent)，那么就显示了一个下三角。

在使用边框的问题上，我们也遇到过一些问题，例如：

从上图可以发现，第二个菜单和第三个菜单的左边框不正确，其原因是，前一个元素的右边框和后一个元素的左边框叠加在了一起。想要解决这个问题，很简单，把后面两个元素的左边框去掉或者设置它们的margin-left为负值即可。

<style>
    *{
        margin:0;
        padding:0;
    }
    li{
        list-style:none;
    }
    ul li{
        float:left;
        width:100px;
        height:35px;
        line-height:35px;
        text-align:center;
        margin:100px auto;
        border:4px solid #dedede;
    }
    ul li ~ li{
        /*border-left:none;*/
        margin-left:-4px;
    }
</style>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</body>
复制代码

运行效果，如下所示：

2.一个和边框很像的属性outline

可以用它来绘制元素的轮廓，并且不占空间。

<style>
    .box{
        width:100px;
        height:100px;
        line-height:100px;
        margin:100px auto;
        text-align:center;
        background:red;
        outline:1px solid #dedede;
    }
</style>
<body>
    <div class="box">outline</div>
</body>
复制代码

猜一猜，这个div的宽度和高度是多少呐？

使用outline属性可以很好的解决了，当鼠标移动到某元素上时，动态添加边框带来的抖动问题。

<style>
    .box{
        width:100px;
        height:100px;
        line-height:100px;
        margin:100px auto;
        text-align:center;
        background:red;
    }
    .box:hover{
        outline:4px solid #dedede;
    }
</style>
<body>
    <div class="box">outline</div>
</body>
复制代码

运行结果如下：

值得注意的是，border-radius不会作用在outline上。

<style>
    .box{
        width:100px;
        height:100px;
        line-height:100px;
        margin:100px auto;
        text-align:center;
        background-color:red;
        outline:5px solid #dedede;
        border-radius:20px;
    }
</style>
<body>
    <div class="box">outline</div>
</body>
复制代码

运行结果如下：

如果想不占空间，还想使用border-radius怎么办呐？

<style>
    .box{
        width:100px;
        height:100px;
        line-height:100px;
        text-align:center;
        background-color:red;
        border:10px solid #dedede;
        border-radius:20px;
        box-sizing:border-box;
    }
</style>
<body>
    <div class="box"></div>
</body>
复制代码

还可以利用box-shadow属性：

<style>
    .box{
        width:100px;
        height:100px;
        line-height:100px;
        text-align:center;
        background-color:red;
        box-shadow:0 0 0 10px #dedede;
        border-radius:10px;
        margin:10px;
    }
</style>
<body>
    <div class="box">box-shadow</div>
</body>
复制代码

运行结果如下：

box-shadow：x轴偏移 y轴偏移阴影大小边框大小填充颜色，利用此属性，可以很好的模拟边框，还不占空间。

3.利用CSS制作图标

(1) 平行四边形图标

<style>
    .box{
        width:50px;
        height:50px;
        background:red;
        transform:skew(-25deg);
        margin-left:100px;
    }
</style>
<body>
    <div class="box"></div>
</body>
复制代码

运行结果如下：

(2) 暂停按钮

暂停按钮的原理是利用边框border，里面的方形用outline，再利用outline-offset属性可以用来设置偏移，并且是按照比例来的。

<style>
    .box{
        width:50px;
        height:50px;
        color:#000;
        border:1px solid #000;
        cursor:pointer;
        border-radius:50%;
        outline:10px solid #000;
        outline-offset:-26px;
    }
</style>
<body>
    <div class="box"></div>
</body>
复制代码

运行结果如下：

如果将outline-offset再设置小一点，就出现了一个+号。

如果再修改一些属性和添加一些属性，就会出现如下的图标：

<style>
    .box{
        width:50px;
        height:50px;
        background-color:#000;
        border:1px solid #000;
        cursor:pointer;
        border-radius:50%;
        outline:10px solid #fff;
        outline-offset:-35px;
        transform:rotate(45deg);
    }
</style>
<body>
    <div class="box"></div>
</body>
复制代码

(3) 梯形图标

<style>
    .box{
        width:35px;
        border:50px solid transparent;
        border-bottom:50px solid red;
    }
</style>
<body>
    <div class="box"></div>
</body>
复制代码

运行结果如下：

(4) 鹰嘴图标

<style>
    .box{
        width:35px;
        border-top:50px solid transparent;
        border-right:22px solid #096;
        border-bottom-right-radius:100%;
    }
</style>
<body>
    <div class="box"></div>
</body>
复制代码

运行结果如下：

(5) 左右箭头图标

<style>
    .box{
        width:0;
        height:0;
        border:10px solid transparent;
        border-left:10px solid red;
        -webkit-box-reflect: left 5px;
        box-reflect:left 5px;
        margin-left:100px;
    }
</style>
<body>
    <div class="box"></div>
</body>
复制代码

运行结果如下：

值得注意的是，box-reflect属性具有兼容性问题，只能在Chrome浏览器中打开。

(6) 下载图标

<style>
    .box{
        width:0;
        color:blue;
        border:8px solid transparent;
        border-top:8px solid blue;
        box-shadow:0 -12px 0 -4px;
    }
</style>
<body>
    <div class="box"></div>
</body>
复制代码

运行结果如下：