前言#
你也想让你的萌备用上漂亮的徽章吗
此篇文章我将介绍两种方法来给你的萌备用上美丽的徽章
开始#
方法一：使用Shields.io#
最简单的一种方式，可以自定义颜色、文本、徽标样式
打开Static Badge | Shields.io ↗，划到内容底部
填写徽章信息：
- badgeContent:
萌ICP备-xxxxxxxx号-pink - labelColor (可选):
purple
填写完后点击Execute查看效果
复制给出的填写代码，按需复制，然后引用到网站的页脚，就行啦！
方法二：使用矢量图#
只需替换 但颜色为固定的紫-粉
创建一个格式为svg的文件，用文本编辑器打开，填入以下内容：
*.svg
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="20" role="img" aria-label="moeicp">
<title>MoeICP</title>
<linearGradient id="s" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<clipPath id="r">
<rect width="128" height="20" rx="3" fill="#fff"/>
</clipPath>
<g clip-path="url(#r)">
<rect width="51" height="20" fill="purple"/>
<rect x="51" width="77" height="20" fill="pink"/>
<rect width="128" height="20" fill="url(#s)"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110">
<text aria-hidden="true" x="265" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="410">萌ICP备</text>
<text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="410">萌ICP备</text>
<text aria-hidden="true" x="885" y="150" fill="#ccc" fill-opacity=".3" transform="scale(.1)" textLength="670">20252235号</text>
<text x="885" y="140" transform="scale(.1)" fill="#333" textLength="670">20252235号</text>
</g>
</svg>若无错误，就能在网站中引用并使用啦
结束#
- 使用方法一直接引用链接会增加站点的跨域请求，而且在部分地区可能会初见访问失败的情况，建议将效果矢量图下载到本地然后将其引用到网站中