1、首先，我们使用a标签来展示内容，在一个大盒子里包含3个a标签，分别写上文字内容，代码如下： <body> <div class="gcs-radius"> <a href="#">语文</a> <a href="#">数学</a> <a href="#">英语</a> </div> </body>效果图如下：
2、为了案例好看，我们给整个body添加背景颜色，并且设置上边和左边的内边距分别为50px,代码如下： body{ background: #ccc; padding-top: 50px; padding-left: 50px; }效果图如下：
3、接下来，给a标签添加样式，因为要制作圆形，所有首先要画出一个正方形，设置宽度与高度一致，为100px,行高为100px，这样文字就垂直居中，再设置t髫潋啜缅ext-align为center这样文字水平居中，文字颜色为红色，背景为白色。代码如下： .gcs-radius a{ width: 100px; height: 100px; line-height: 100px; text-align: center; display: inline-block; background: white; text-decoration: none; color: red; }效果图如下：
4、上面显示的是正方形，下面最重要的一步就是给a元素添加border-radius: 50%，这样就能把正方形变成标准的圆形，请看效果图：
5、为了使案例好看一点，这里再给a元素加上一个鼠标悬停的效果，代码如下： .gcs-radius a:hover{ background: red; color: #fff; }效果图如下：
6、最后，给大家贴上完整的源码，如下：争犸禀淫<!DOCTYPE html><html> <head> <meta charset="稆糨孝汶;UTF-8"> <title></title> <style type="text/css"> body{ background: #ccc; padding-top: 50px; padding-left: 50px; } .gcs-radius a{ width: 100px; height: 100px; line-height: 100px; text-align: center; display: inline-block; background: white; text-decoration: none; color: red; border-radius: 50%; } .gcs-radius a:hover{ background: red; color: #fff; } </style> </head> <body> <div class="gcs-radius"> <a href="#">语文</a> <a href="#">数学</a> <a href="#">英语</a> </div> </body></html>