您的位置：首页 > Web前端 > CSS

Css制作小图标

2015-11-18 10:34 726 查看
在日常的前端中，经常使用一些小图标，如


但是对于一个不会平面设计的人来说，这样是一件很费劲的事情，那么可以使用css实现类似的图标

如：

.tag-red {
color: #fff;
display: inline-block;
font-size: 10px;
font-weight: 400;
height: 17px;
line-height: 17px;
margin-right: 0;
padding: 0 3px;
text-align: center;
background-color: #d33556;
}

.tag-blue {
color: #fff;
display: inline-block;
font-size: 10px;
font-weight: 300;
height: 17px;
line-height: 17px;
padding: 0 3px;
text-align: center;
background-color: #258ee7;
}


<a class="tag-red" href="#" target="_blank">置顶</a>
<a class="tag-blue" href="#" target="_blank">置顶</a>


效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航