html圆形怎么写 _圆形

1.html圆圈内容怎么写如图在线等急设计师要做一个圆圈，首先要做一个正方形的div，然后加上border边框，边框要用border-radius圆角，当圆角像素等于div长宽的一半时，就变成了一个圆形边框中间的文字用line-height和text-align上下左右居中还有那个箭头应该是图片来的，可以当背景图片插入，这个我就不写了。
2.用html做一个网页背景,要求为圆形,且文字要居中如果要插入个网页背景，要求为圆形，文字居中，用背景图片直接插入是比较难办到的，我们可以用div来做个圆形，文字也放在div中，通过div的定位技术把文字放到圆形中间，把圆形放到屏幕中间，以下是我的html代码
<html>
<head>
<style>
.circle{
background-color: red;
width: 500px;
height: 500px;
border-radius: 250px;
position: relative;
}
.text{
position: absolute;
top: 200px;
【html圆形怎么写】right: 200px;
}
</style>
</head>
<body>
<div class="circle">
<div class="text">
saasdfs
</div>
</div>
</body>
</html>
3.html5+css3 做个圆形导航只写了里面的，外面的不太好写
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>；圆形导航</title>
<link rel="stylesheet" href="http://www.xuexi88.com/zhishi/css/common.css">
<style type="text/css">
.div1{
width: 405px;
height: 405px;
border-radius: 50%;
margin-top: 40px;
margin-left: 40px;
background-color: #fff;
position: relative;
}
.div2{
width: 200px;
height: 200px;
background-color: #999;
color:#fff;
text-align: center;
line-height: 200px;
}
.div2:nth-child(1){border-top-left-radius: 100%;}
.div2:nth-child(2){border-top-right-radius: 100%;}
.div2:nth-child(3){border-bottom-left-radius: 100%;}
.div2:nth-child(4){border-bottom-right-radius: 100%;}
.div3{
position: absolute;
width: 200px;
height: 200px;
border-radius: 100%;
top: 100px;
left: 100px;
z-index: 5;
background-color: red;
color: #fff;
border: 3px solid #fff;
text-align: center;
line-height: 200px;
box-shadow: 0 0 15px rgba(255,255,255,.6);
}
</style>
</head>
<body>
<div class="div1 clearfix">
<div class="fl div2 mb-5">；导航1</div>
<div class="fr div2 mb-5">；导航1</div>
<div class="fl div2">；导航1</div>
<div class="fr div2">；导航1</div>
<div class="div3">；综合服务</div>
</div>
</body>
</html>

文章插图