使用css的border-radius制作圆形案例
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，这样文字就垂直居中，再设置text-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>