css3实现圆点

 

效果：

CSS：

    .dot {
        width: 14px;
        height: 14px;
        font: 12px/18px Arial;
        border-radius: 7px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
        background: -moz-linear-gradient(top, #18345d 0%,#6d8390 100%);  /*Firefox*/
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#18345d), to(#6d8390));  /*Chrome,Safari*/
        background: -o-linear-gradient(top, #18345d 0%,#6d8390 100%);  /*Opera*/
    }
    .dot:before {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 6px;
        display: inline-block;
        margin: 1px 0 0 1px;
        background: -moz-linear-gradient(top, #fff 0%,#5da2db 30%,#fff 100%);  /*Firefox*/
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(30%, #5da2db), color-stop(100%, #fff));  /*Chrome,Safari*/
        background: -o-linear-gradient(top, #fff 0%,#5da2db 30%,#fff 100%);  /*Opera*/
    }
    .dot:after {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -2px 0 0 -2px;
        background: #143345;
    }

 

html：

<span class="dot"></span>这是demo