郑州网站建设业务咨询热线：
0371-65349913 / 15333818157
0371-65349913 / 15333818157
本网页展示了使用DIV+CSS网页技术制作圆形框和圆形图案，这一效果往往会用在网页上，可以作为修饰系列编号之用，比如我司的网站建设流程分为7个步骤，那么我们可以利用圆形框来修饰数字1，2，...，7，可以起到较好的修饰作用。本实例列出了三种圆形框和图案的实现，并出示了下面的图示，可以更直观地看出其实现原理，各位可以结合下面的源代码及图形显示，来制作出其他类似图案出来，各位也可以根据本文中所列举的实例代码，进一步地修改参数，就可以制作出更多类型的、更加符合要求的圆形框和圆形图案来。在此，郑州网站建设公司的小编整理了实现代码列在下面，可供建站用户和网站建设人员参考。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>使用DIV+CSS网页技术制作圆形框和图案</title>
</head>
<style type="text/css">
.mycircle1{
width: 100px;
height: 100px;
border:thin solid #fa6;
border-radius:50%;
}
.mycircle2{
border:1px solid #fa6;
border-radius:50px;
width:100px;
height:100px;
background-color: #FFCC99;
-webkit-border-radius:50px;
-moz-border-radius:50px;
-o-border-radius:50px;
}
.mycircle3{
border:1px solid #fa6;
border-radius:50px;
width:100px;
height:100px;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 55%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 55%);
}
</style>
<body>
<div class="mycircle1" style="float:left;"></div> <!--图一显示-->
<div class="mycircle2" style="float:left; text-align:center; margin-left:20px; line-height:100px;">文字在中间</div> <!--图二显示-->
<div class="mycircle3" style="float:left; text-align:center; margin-left:20px;"></div> <!--图三显示-->
</body>
</html>