在没有图片的情况下用css3实现一个圆形

       

        最近研究学习css3发现它的确用很大的用途，以前圆形大部分都是用图片来实现的，今天用css3实现了一个圆形，

html代码如下：

            <div>蓝枫 </div>

css代码如下：

        * {

    margin:0;

    padding:0;

}

div {

    width:58px;

    height:58px;

    border-radius:29px;

    background:#F00;

    box-shadow:-10px 0 20px rgba(0, 0, 0, 0.2) inset;

    margin:30px 0 0 30px;

    text-align:center;

    line-height:58px;

    color:#fff;

    font-weight:bold;

}

 

预览效果：

   


 支持的浏览器有：Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+