知识储备
1.SVG Path
小测试
最终效果（扣子丑了点）：
圆形文字
html
<div class="circular">
<svg viewBox="0 0 100 100">
<path id="circle" d="M 0,50 a 50,50 0 1,1 0 ,1 z"></path>
<text>
<textPath xlink:href="#circle">circular reasoning works because</textPath>
</text>
</svg>
</div>
解释：
透过SVG的基本方式，在<text>元素里有一个包含文字的<textPath>元素，<textPath>元素也会提到一个<path>元素，该元素透过id来定义我们的路径。（行间SVG里的文字也会继承我们大部分的文字样式）
无CSS时的效果：
无CSS时的效果
理解一下SVG路径语法
M 0,50：移动（0，50）
a 50,50 0 1,1 0,1 从目前所在的点画出一个弧形，从目前位置往右0单位，往下1单位，弧形的水平和垂直半径都应该为50（两个弧形里，选择角度最大的）
z: 透过一条直线闭合路径
下一步：
从圆形路径移除黑色填色
.circular path{
fill: none;
}
下一步：
.circular svg{
overflow: visible;
font-size: 1.6em;
}
让边角隐藏的文字都显示,并调整字体大小
overflow: visible;
快完成的效果
下一步：
找一张纽扣图片，调整一下大小，把文字放入纽扣中
其实放地球更加有趣
.circular{
width: 4em;
height: 4em;
background: url("1.png") ;
background-size: cover;
padding: 2em;
}
最终效果
圆形文字
星球圆形文字
完整的CSS
css
.circular{
width: 4em;
height: 4em;
background: url("1.png") ;
background-size: cover;
padding: 2em;
}
.circular path{
fill: none;
}
.circular svg{
display: block;
overflow: visible;
font-size: 1.6em;
}
