使用css制作圆形，我们需要使用到一个关键属性：border-radius，下面通过一个小案例教会大家如何制作，首先看下效果图，如下：
工具/原料
前端开发工具HBuilder
浏览器
方法/步骤
1、首先，我们使用a标签来展示内容，在一个大盒子里包含3个a标签，分别写上文字内容，代码如下： <body><divclass="gcs-radius"><ahref="#">语文</a><ahref="#">数学</a><ahref="#">英语</a></div> </body>效果图如下：
2、为了案例好看，我们给整个body添加背景颜色，并且设置上边和左边的内边距分别为50px,代码如下： body{background:#ccc;padding-top:50px;padding-left:50px; }效果图如下：
3、接下来，给a标签添加样式，因为要制作圆形，所嘀芟苒疾有首先要画出一个正方形，设置宽度与高度一致，为100px,行高为100px，这样文字就垂直居中，再设置t髫潋啜缅ext-align为center这样文字水平居中，文字颜色为红色，背景为白色。代码如下： .gcs-radiusa{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-radiusa:hover{background:red;color:#fff; }效果图如下：
6、最后，给大家贴上完整的源码，如下：争犸禀淫<!DOCTYPEhtml><html> <head> <metacharset="稆糨孝汶;UTF-8"> <title></title> <styletype="text/css"> body{background:#ccc;padding-top:50px;padding-left:50px; } .gcs-radiusa{width:100px;height:100px; line-height:100px;text-align:center;display:inline-block; background:white;text-decoration:none;color:red; border-radius:50%; } .gcs-radiusa:hover{background:red;color:#fff; } </style> </head> <body><divclass="gcs-radius"><ahref="#">语文</a><ahref="#">数学</a><ahref="#">英语</a></div> </body></html>