css html实现红色圆点,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：

这是demo

原文：http://www.cnblogs.com/k13web/p/4139393.html