.div1 {
width:100px
height:100px
background-color:transparent
border:4px solid red
border-radius:60px
margin-top:20px
}
.div2 {
width:60px
height:60px
background-color:#fff
z-index:1
border-radius:45px
position:absolute
top:0
left:80px
}
还有一个是用HTML5的canvas标签，不过得用JS
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>四色空心圆环</title>
<style>
*{ padding:0margin:0font-size:14px }
/* 第一种 */
.wai{ width: 360pxheight: 360pxposition: relativemargin: 120px autoborder-radius: 50%overflow:hidden }
.nei{ width: 160pxheight: 160pxline-height:160pxtext-align:centerbackground-color: #FFFborder-radius: 50%position: absolutemargin: autoleft:0right:0top:0bottom:0 }
.wai .fx{ width: 100%height:100%position:absolutetransform:rotate(45deg) }
.top{ background: #FF00FFwidth: 180pxheight:180pxposition: absolutetop:0left:0 }
.right{ background: #7B4DB1width: 180pxheight:180pxposition: absolutetop:0right:0 }
.bottom{ background: #1AA260width: 180pxheight:180pxposition: absolutebottom:0right:0 }
.left{ background: #20647Dwidth: 180pxheight:180pxposition: absolutebottom:0left:0 }
/* 第二种 */
.ease{
width: 360pxheight: 360pxmargin: 120px autoborder:100px solid redborder-radius:50%overflow:hidden
box-sizing:border-boxline-height:160pxtext-align:center
border-top-color: #FF00FFborder-right-color: #7B4DB1border-bottom-color: #1AA260border-left-color: #20647D
}
</style>
</head>
<body>
<!-- 第一种 -->
<div class="wai">
<div class="fx">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
<div class="nei">Hello</div>
</div>
<!-- 第二种 -->
<div class="ease">Hello</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）