CSS圆环样式

文/王乐生

最近重新开始接触CSS，挑战了一下用CSS代码拼出这样的一个效果。

先附上效果图

css圆环效果图

HTML代码块

    

        

            

        

        

            

        

    

    

        

            

        

        

            

        

    

    

        

            

        

        

            

        

    

    

        

            

        

    

CSS代码块

.bigCircle{

    width: 10px;

     height: 10px;

     border: 1px solid #999999;

    border-radius: 50%;

}

.solidRing{

    width: 8px;

    height: 8px;

     background: #999999;

    border-radius: 50%;

    margin-top:1px;

    margin-left:1px;

}

.rod{

     width: 60px;

    height: 1px;

    background: #999999;

    margin-left:25px;

    float:right;

    display:inline;

}

.picDiv{

    margin-left:30px;

     margin-top:30px;

    width:80px;

    height:16px;

    position:relative;

}

.sectionDiv{

    line-height:160px;

    overflow:hidden;

    position:absolute;

    margin-top:-6px;

}